javascript - Jquery: ajaxForm not doing anything whilst having correct ID's (fiddle) -

i want submit right form after clicking submit button on form.

here html code:

<div id="post_output_1"> <form id="form_1" action="inc/action.php" method="post">     <input id="age" type="text" name="age" />     <input id="submit" type="submit" name="submit" /> </form> </div>  <div id="post_output_2"> <form id="form_2" action="inc/action.php" method="post">     <input id="age" type="text" name="age" />     <input id="submit" type="submit" name="submit" /> </form> </div> 

and here jquery code:

$("form").submit(function (e) {      e.preventdefault();      var formid = this.id;      var divid = $(this).closest("div").attr("id");      alert('#' + formid);      alert('#' + divid);           $('#' + formid).ajaxform(function (data) {           $('#' + divid).html(data);      });  }); 

here fiddle: http://jsfiddle.net/ryz3tqzr/1/

its not submitting form div, finding correct attributes. know why , how let form submitted? (i use jquery 1.11.0 , jquery form plugin)

thanks in advance.

if understand documentation of plugin properly, ajaxform binding event handler submit event of form.

your code adding handler after submit has occured within own submit event handler. furthermore add e.preventdefault(); so, second hit on button won't execute additional handler, puts 1 on stack.

i've updated jsfiddle bit.

$("form").submit(function (e) {     //e.preventdefault();     var formid = this.id;     var divid = $(this).closest("div").attr("id");     alert('#' + formid);     alert('#' + divid); });  $('#post_output_1').ajaxform(function (data) {         $('#post_output_1').html(data);     });  $('#post_output_1').ajaxform(function (data) {         $('#post_output_1').html(data);     }); 

edited: in order have more generic, can add class div's:

<div id="post_output_1" class="output"> <form id="form_1" action="inc/action.php" method="post">     <input id="age" type="text" name="age" />     <input id="submit" type="submit" name="submit" /> </form> </div>  <div id="post_output_2"class="output"> <form id="form_2" action="inc/action.php" method="post">     <input id="age" type="text" name="age" />     <input id="submit" type="submit" name="submit" /> </form> </div> 

and then:

.... $(".output").each(function (index, value) {     var = this;     $(that).ajaxform(function (data) {         // console.log(this);         $(that).html(data);     }); }); 

fiddle here.