ajaxForm plugin submits on any <button> clicked

Question

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 1

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" />