javascript - Form submit not working after second attempt in jquery ajax -

i have form in project submitted jquery ajax.

the data validated on server side , if data invalid load form validation errors , append html div.

on next form submission attempt, directly redirected form action url i.e event.preventdefault() not working.

initformsubmit: function () {                 var form = $('form#forum');                 $(document).on('submit', form, function (event) {                     event.preventdefault();                      if ($(this).attr('name')) {                         form.append(                                 $("<input type='hidden'>").attr({                             name: $(this).attr('name'),                             value: $(this).attr('value')})                                 );                     }                      var formdata = form.serialize();                      $.ajax({                         type: form.attr('method'),                         url: form.attr('action'),                         data: formdata,                         success: function (data) {                             $('#respond').empty();                              $('#respond').append(data);                         }                     });                 });              } 

data = form validation error if invalid.

you're not using event delegation correctly. second parameter you're passing .on form, jquery object.

for event delegation, second parameter needs string. since object, jquery assuming meant passed in data parameter instead of selector parameter. (if console.log(event.data) inside handler, should show form object).

simply change handler to:

$(document).on('submit', 'form#forum', function (event) { 

and make sure change references inside handler form $(this)