Ajax-загруженная форма всегда отправляет первое введенное значение, даже если оно перезагружено.

Question

Должен признать, что я действительно не знаю, как объяснить эту «проблему», которую у меня есть, и я не смог найти хороший заголовок для этой темы. Во всяком случае, я постараюсь быть ясным, потому что не уверен, могу ли я добавить JSFiddle или фрагмент кода.

Начнем с проекта. Я работаю над какой-то библиотекой DVD, которая будет использоваться только в локальной сети. Есть страница, которая позволяет пользователю добавлять новые фильмы в базу данных. Для этого я использую API Allocine (французский эквивалент IMDB) для сбора информации о фильмах. Пользователь может ввести название фильма (или его часть) и выполнить поиск. Затем появятся все соответствующие пленки из Allocine. Если пользователь нажмет на один из них, модальное окно откроет вложение формы, которая позволит пользователю добавить необходимую информацию перед отправкой формы. Затем форма отправляется с использованием AJAX, и результат появляется в том же модальном окне. Проблема возникает, когда я хочу добавить второй фильм. Если я не перезагружаю страницу, прежде чем пытаться отправить форму в другое время, значение из первого фильма будет отправлено вместо них из второго, и это сбивает меня с ума.

Это код javascript для отправки формы.

$("body").on("click", "#AddFilmButton", function() {  
    var formDatas = $('#FormAjoutFilm').serialize(); 

    $.ajax({ 
     url : 'Functions.php', 
     type : 'POST', 
     data : 'Action=AddFilm&' + formDatas, 
     cache: false, 
     dataType : 'html', 
     success : function(result, statut){ 
      $(result).modal();    
     }, 
    });  
}); 

Вы можете заметить, что я смотрю на кнопку щелчка событие вместо того, формы представить событие. Это потому, что, когда я использовал событие отправки формы, страница постоянно обновлялась, независимо от того, использовал ли я preventDefault или нет. Я начинаю задаваться вопросом, не сброшено ли отправленное значение именно потому, что я использовал это обходное решение. Неужели это так?

Какой еще код полезен, чтобы помочь вам разобраться в моей проблеме?

РЕДАКТИРОВАТЬ: как и в случае с @intale, у меня есть несколько форм в DOM из-за этой модальной системы. Я добился определенного прогресса. Во-первых, теперь я могу использовать надлежащий обработчик событий, и я смотрю событие отправки формы, так как теперь работает функция preventDefault. В функции успеха я добавил эту строку: $('#FormAjoutFilm').remove(); Он работает почти так, как предполагалось, в том, что данные передаются только в другое время. : p Тем не менее, это лучше, чем предыдущее поведение, и мне нужно исправить его сейчас. Спасибо за каждого, кто внес свой вклад до сих пор. Если вы знаете, почему мне нужно отправить форму два раза, чтобы заставить ее работать, сообщите мне. Это то, что у меня есть сейчас. :)

$("body").on("submit", "#FormAjoutFilm", function(e) {  
    e.preventDefault(); 
    var formDatas = $('#FormAjoutFilm').serialize(); 

    alert(formDatas); 

    $.ajax({ 
     url : 'Functions.php', 
     type : 'POST', 
     data : 'Action=AddFilm&' + formDatas, 
     cache: false, 
     dataType : 'html', 
     success : function(result, statut){ 
      $('#FormAjoutFilm').remove(); 
      $(result).modal();    
     }, 
    });  
}); 

Second Edit: Похоже, что он окончательно решен после очистки кеша. Спасибо всем, кто внес свой вклад. :)

Answer 1

Попробуйте сброс формы после отправки данных:

success : function(result, statut){ 
    $('#FormAjoutFilm')[0].reset(); 
    $(result).modal();    
    } 

Это предотвратит вашу функцию сериализации от получения первого представления данных