Ввод данных JQuery Serilize пуст

Question

У меня есть форма, содержащая кнопку, при щелчке она отображает модальное окно с другой формой, содержащей ввод и кнопку send / cancel.

Я хочу сериализовать данные в этой модальной форме и отправить их на удаленный сервер через AJAX.

Почему-то, когда я смотрю консоль, я не вижу сериализованные данные, я вижу только Email=

Может кто-нибудь взглянуть на мой код и сказать мне, где я ошибаюсь, пожалуйста? Должно ли это работать?

HTML

<form id="feedbackForm">
    <input class="button" id="bad" src="bad.png" type="image">
</form>

<div aria-hidden="true" class="modal" id="modal" role="dialog" tabindex="-1">
    <form id="emailForm">
        <div class="form-group">
            <input class="form-control" name="Email" type="text">
        </div>
        <div class="modal-footer">
            <button class="btn" type="submit">Send</button> 
            <button class="btn" data-dismiss="modal" id="closeModal" type="button">Cancel</button>
        </div>
    </form>
</div>

AJAX

<script>
      $(document).ready(function() {
          var request;
          $("#feedbackForm").on("touchstart, click", function(e) {
              e.preventDefault();
              var serializedData = $("#emailForm").serialize();
              $('#modal').modal('toggle');
              $("#emailForm").on("submit", function(e) {
                  e.preventDefault();
                      request = $.ajax({
                          url: "MyURL",
                          type: "post",
                          data: serializedData
                      });
                  request.done(function(response, textStatus, jqXHR) {
                      console.log(serializedData); // displays Email=
                  });
              });
          });
      });
</script>

Answer 1

Если я правильно понимаю, когда пользователь нажимает сенсорный запуск

1. Вы сериализуете форму
2. Вы открываете модал, содержащий форму
3. Вы перезаписали событие отправки, чтобы отправить свой ajax

Дело в том, что вашей переменной уже были заданы значения формы, прежде чем она будет заполнена пользовательскими данными. (Если он открывает модал в первый раз)

Просто получите данные из функции ajax submit в нужный момент, например так:

data: getSerializedData()

и функция

function getSerializedData(){
    return $("#emailForm").serialize();
}