Html button prevent submit

How to Disable submit button in HTML JavaScript? Multiple Form Submission Solution Example

Avoiding multiple submissions of HTML form or POST data is a common requirement in Java web applications. Thankfully, You can prevent multiple submissions by disabling the submit button in HTML and JavaScript itself, rather than handling it on the server-side. This is a very common requirement while developing a web application using Servlet and JSP or any other web technology. At the same time, there is a lot of information and noise available in web, and its very hard to find a simple approach to the disable submit button. When I search for a simple way to disable the submit button in HTML and JavaScript, I was overwhelmed by responses on forums and various online communities.
Those are good for intermediate HTML and JavaScript developer but a beginner might just get overwhelmed by the amount of information presented and rather confused to use which the approach will work, how exactly should I disable submit button to prevent multiple form submissions etc.

That drives me to write this post and summarize the simplest possible approach to disable submit button using HTML and JavaScript. I see there could be issues related to browser compatibility which we can talk once we know the simplest approach and my the intention is to add those issues and there remedy as and when I know about it to keep this article update, relevant and simple.

By the way How to avoid multiple submission of HTML form is also a popular JSP Interview question and worth preparing.

How to disable submit button using JavaScript

You don’t need to do a lot just add this.disabled=’disabled’ on onclick event handler of button like below:

This JavaScript code will disable the submit button once clicked. Instead of this, which represent current element similar to Java this keyword , Yo u can also use document.getElementById(‘id’) but this is short and clear.

Now some browser has problem to submit data from disabled button. So, its better to call form.submit() from onclick itself to submit form data, which makes your code to onclick color: #993300; font-family: «arial»;»>. Particularly, on Internet Explorer a disabled submit button doesn’t submit form data to server. You can also change value or text of submit button from submit to «Submitting. » to indicate user that submit is in progress. Final JavaScript code should look like:

That’s all you need to disable submit button using HTML and JavaScript to prevent multiple submissions.

Once you are comfortable with a simple way of disabling the submit button you may go and explore multiple ways to prevent multiple form submissions or disable submit button. As I said if you are a beginner to JavaScript or HTML then it takes some time to get hold of these tricks. If you are using Internet Explorer and not calling this.form.submit() then the only button will be disabled but the form will not be submitted so always call this.form.submit() .

form.submit() doesn’t include submit button name in request

There is a caveat while using JavaScript to submit form, it doesn’t include name of submit button as request parameter. If you are checking for name of submit button on server side your code will fail. For example, following code which is checking for SUBMIT button as request parameter usin g Spring MVC WebUtils class.

This code will fail if form is submitted by this.form.submit(), rather than clicking submit button. Traditionally name of submit button is included in HTTP request only if form is submitted by clicking submit button otherwise no. Fortunately there is a workaround to this problem, You can call document.form_name.submit_name.click() to simulate click on submit button.

This will include name of submit button i n HTTP POST request a nd above Spring MVC example will work as expected. If you don’t have multiple buttons on screen and only have one submit button than you can also use HTML hidden input field to send name of submit button as shown in below example:

What if you have multiple submit buttons on one screen

There are cases when you have multiple HTML button in one screen like » Accept » or » Decline «, » Yes or » No » , Accept » or » Reject » etc. In this case, clicking one button should disable both buttons because there are intended for one operation.

In order to disable multiple submit button in onclick, You need to explicitly disable those buttons. As in following example, if you have two buttons with name accept and decline , we are disabling both when any of the button get clicked.

Источник

Html button prevent submit

Last updated: May 24, 2023
Reading time · 4 min

# Table of Contents

# Prevent a button from submitting the form using JavaScript

To prevent a button from submitting the form in JavaScript:

1. Use the addEventListener() method to add a click event listener to the button.
2. Use the event.preventDefault() method to prevent the button from submitting the form.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> form> input id="first" name="first" /> input id="last" name="last" /> button id="btn">Clickbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); const firstNameInput = document.getElementById('first'); const lastNameInput = document.getElementById('last'); btn.addEventListener('click', event =>  event.preventDefault(); console.log(firstNameInput.value); console.log(lastNameInput.value); >); 

We used the document.getElementById method to select the button and the two input elements.

The next step is to add a click event listener to the button element.

When the button is clicked, the callback function is invoked where we call the event.preventDefault() method.

Copied! 
btn.addEventListener('click', event =>  event.preventDefault(); console.log(firstNameInput.value); console.log(lastNameInput.value); >); 

The preventDefault method tells the browser to not take the default action of the event.

In case of a button click, the default action is to submit the form.

This means that the form won’t be submitted and the page won’t get refreshed.

# Prevent a button from submitting the form by setting its type to button

You can also prevent a button from submitting the from by setting its type attribute to button .

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> form> input id="first" name="first" /> input id="last" name="last" /> button type="button" id="btn">Clickbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); const firstNameInput = document.getElementById('first'); const lastNameInput = document.getElementById('last'); btn.addEventListener('click', event =>  console.log(firstNameInput.value); console.log(lastNameInput.value); >); 

Notice that we set the button’s type attribute to button .

Copied! 
button type="button" id="btn">Clickbutton> 

By default, the button’s type attribute is set to submit .

The default behavior is for the button to submit the form, however, this can be changed by setting the button’s type attribute.

Notice that we didn’t have to call the event.preventDefault() method in the example.

# Prevent a button from submitting the form by returning false

You can also prevent a button from submitting the form by returning false from the form’s onsubmit attribute.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> form onsubmit="return false;"> input id="first" name="first" /> input id="last" name="last" /> button id="btn">Clickbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); const firstNameInput = document.getElementById('first'); const lastNameInput = document.getElementById('last'); btn.addEventListener('click', event =>  console.log(firstNameInput.value); console.log(lastNameInput.value); >); 

This time, we set the onsubmit attribute on the form element.

Copied! 
form onsubmit="return false;"> form> 

The submit event is triggered when the form is submitted.

When the form is submitted, we return false straight away which prevents the browser from taking the default action.

# Prevent a button from submitting the form by disabling the button

You can also prevent the user from submitting the form by disabling the button.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> form onsubmit="return false;"> input id="first" name="first" /> input id="last" name="last" /> button id="btn" disabled>Clickbutton> form> body> html> 

We set the disabled attribute on the button element so it cannot be clicked.

In some cases, you might only want to disable the button when the input fields are empty.

Here is the HTML for the example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> h2>bobbyhadz.comh2> form> input id="first" name="first" /> input id="last" name="last" /> button id="btn" disabled>Clickbutton> form> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const btn = document.getElementById('btn'); const firstNameInput = document.getElementById('first'); const lastNameInput = document.getElementById('last'); firstNameInput.addEventListener('input', event =>  disableOrEnableButton(); >); lastNameInput.addEventListener('input', event =>  disableOrEnableButton(); >); function disableOrEnableButton()  if ( firstNameInput.value.trim() && lastNameInput.value.trim() )  btn.removeAttribute('disabled'); > else  btn.setAttribute('disabled', ''); > > btn.addEventListener('click', event =>  console.log(firstNameInput.value); console.log(lastNameInput.value); >); 

The button starts as disabled and then when the values of the input fields change:

• If at least one input field is empty, the button remains disabled
• If both input fields have values, the button is no longer disabled

The input event is triggered when the value of an input , select or textarea element has been changed.

Copied! 
firstNameInput.addEventListener('input', event =>  disableOrEnableButton(); >); lastNameInput.addEventListener('input', event =>  disableOrEnableButton(); >); 

When the value of the input field changes, we call the disableOrEnableButton function.

Copied! 
function disableOrEnableButton()  if ( firstNameInput.value.trim() && lastNameInput.value.trim() )  btn.removeAttribute('disabled'); > else  btn.setAttribute('disabled', ''); > > 

The function disables the button if at least one input field is empty, otherwise, it removes the disabled attribute.

The String.trim method is used to prevent the user from only entering spaces in the input field.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to prevent buttons from causing a form to submit with HTML

By default, a button has an innate type property of submit . When tapped, clicked, or activated inside a form, it will cause that form to submit (and trigger a corresponding submit event).

form id="say-hi"> button>Activate Mebutton> form>

let form = document.querySelector('#say-hi'); form.addEventListener('submit', function ()  console.log('Someone said hi!'); >); 

Every now and then, you have a button inside a form that’s used for some other interaction, and should not cause the form to submit.

I often see people use JavaScript to detect those buttons, and run event.preventDefault() to stop the default form submit behavior from running. I used to be one of those people.

form id="say-hi"> button>Activate Mebutton> button id="toggle-something">Toggle Somethingbutton> form>

form.addEventListener('submit', function (event)  // Ignore the #toggle-something button if (event.submitter.matches('#toggle-something'))  event.preventDefault(); > console.log('Someone said hi!'); >); 

A while back, though, my friend Eric Bailey taught me a much simpler way to handle this: add type=»button» to the button.

form id="say-hi"> button>Activate Mebutton> button id="toggle-something" type="button">Toggle Somethingbutton> form>

Now, clicking, tapping, or otherwise activating the #toggle-something button will not cause a submit event to run.

Hate the complexity of modern front‑end web development? I send out a short email each weekday on how to build a simpler, more resilient web. Join over 14k others.

Made with ❤️ in Massachusetts. Unless otherwise noted, all code is free to use under the MIT License. I also very irregularly share non-coding thoughts.

Источник