miro miro - 7 months ago 12
Javascript Question

ajaxForm plugin submits on any <button> clicked

Take a look at this

http://jsbin.com/goyokir/edit?html,output

$(document).ready(function() {
$('#myForm').ajaxForm(function() {
alert("Form was submitted");
});

$('button').click(function(e){
e.preventDefault(); //if removed, it acts as submit button
$('body').append('regular clicked!<br>');
});
});


My problem is that my form has some
<button>
's in it and when clicked they act as submit buttons for some strange reason. I can use
preventDefault
to fix that but the other problem is that when your focus on an input and press enter it triggers the first
<button>
it finds, not the
<input type='submit'>


I tried to look at the plugin's source and fix it but it's beyond me.
captureSubmittingElement
seems to be just fine to me.

Any ideas?

Answer

Every button inside a form acts as a submit button by default

Use type="button" to prevent a button from acting as a form submission button.

<button type="button">Regular &lt;Button&gt; 1</button><br>
<button type="button">Regular &lt;Button&gt; 2</button><br>
<input type="submit" value="Input Submit button" />