Form Is Submitted When I Click on the Button in Form. How to Avoid This

Disable form auto submit on button click

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.

Keep button from submitting form Javascript

Since you're not using a type="submit" the only reason your form would submit anything is because you're literally calling the submit() method when the button is clicked. (well, sort of. It's actually form.submit() - the method you created is window.submit()).

By default, an input of type="button" will not do a form submission unless you literally call form.submit()

How to prevent form submit when a button clicked?

I don't agree with the javascript answers. They work, but they're not fixing the cause of the problem.

The form is being submitted because the <button> element has a type of submit by default (see the spec here).

You can get around this by putting type="button" in the html like so:

 <button type="button" class="btn btn-default" id="btn-area">

Form is submitted when I click on the button in form. How to avoid this?

From the fine HTML5 specification:

A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".

And a <button type="submit"> submits the form rather than behaving like a simple <button type="button"> push-button.

The HTML4 spec says the same thing:

type = submit|button|reset [CI]

This attribute declares the type of the button. Possible values:

• submit: Creates a submit button. This is the default value.
• reset: Creates a reset button.
• button: Creates a push button.

So your <button> elements:

<button class="btn">Button_1</button>
<button class="btn">Button_2</button>

are the same as these (in compliant browsers):

<button type="submit" class="btn">Button_1</button>
<button type="submit" class="btn">Button_2</button>

and any time you hit one of those buttons you'll submit your form.

The solution is to use plain buttons:

<button type="button" class="btn">Button_1</button>
<button type="button" class="btn">Button_2</button>

Some versions of IE default to type="button" despite what the standard says. You should always specify the type attribute when using a <button> just to be sure that you will get the behavior you're expecting.

Prevent users from submitting a form by hitting Enter

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

disabling button on click stop form from submitting

Click event occurs before form submit and disabled button prevents submission. This is workaround:

<script>
  $('.button').on('click', function(event) {
    $this=$(this);
    setTimeout(function(){$this.prop('disabled', true);},50);
  });
</script>

Another workaround is to process $('form').on('submit',function(){...});

Edit: ...INSTEAD.

---

Related Topics