CODEWITHSUNDEEP
javascripthtmlbuttonform-submitforms
Paris
Paris

Reputation: 6771

Disable form auto submit on button click

I have a HTML form where I use several buttons. The problem is that no matter which button I click, the form will get submitted even if the button is not of type "submit". e.g. Buttons like :<button>Click to do something</button>, result in form submission.

It's quite painful to do an e.preventDefault() for each one of these buttons.

I use jQuery and jQuery UI and the website is in HTML5.

Is there a way to disable this automatic behavior?

Upvotes: 246

Views: 226224

Answers (6)

&#233;tale-cohomology
&#233;tale-cohomology

Reputation: 1861

Like mas-designs said, call preventDefault(). You can call it on the form itself. Here's a function that does this for all forms, vanilla JS.

function forms_ini(){
  for(var form of document.getElementsByTagName('form')){
    form.addEventListener('submit', function(ev){
      ev.preventDefault()
    })
  }
}

Upvotes: -2

Quentin
Quentin

Reputation: 944442

Buttons like <button>Click to do something</button> are submit buttons.

Set type="button" to change that. type="submit" is the default (as specified by the HTML spec):

The missing value default and invalid value default are the Submit Button state.

Upvotes: 608

Hello Hack
Hello Hack

Reputation: 109

another one:

if(this.checkValidity() == false) {

                $(this).addClass('was-validated');
                e.preventDefault();
                e.stopPropagation();
                e.stopImmediatePropagation();

                return false;
}

Upvotes: -2

Boris D. Teoharov
Boris D. Teoharov

Reputation: 2388

You could just try using return false (return false overrides default behaviour on every DOM element) like that :

myform.onsubmit = function ()
{ 
  // do what you want
  return false
}

and then submit your form using myform.submit()

or alternatively :

mybutton.onclick = function () 
{
   // do what you want
   return false
}

Also, if you use type="button" your form will not be submitted.

Upvotes: 23

mas-designs
mas-designs

Reputation: 7556

<button>'s are in fact submit buttons, they have no other main functionality. You will have to set the type to button.
But if you bind your event handler like below, you target all buttons and do not have to do it manually for each button!

$('form button').on("click",function(e){
    e.preventDefault();
});

Upvotes: 20

bh_earth0
bh_earth0

Reputation: 2842

if you want to add directly to input as attribute, use this 

 onclick="return false;" 

<input id = "btnPlay" type="button" onclick="return false;" value="play" />

this will prevent form submit behaviour

Upvotes: 1

Related Questions