Disable all form javascript

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.

Источник

Enable/Disable Input fields Using JavaScript

While creating a form or a questionnaire, there is a requirement to prompt the user at a certain point while filling in an input field. For instance, limiting the number of characters within a field i.e. “Contact No”. In addition to that, for applying a prerequisite condition to fill a particular field, etc. In such case scenarios, enabling/disabling input fields in JavaScript is a very convenient approach for both the developer and user’s end.

This tutorial will explain the approaches to enable/disable input fields using JavaScript.

How to Enable/Disable Input Fields Using JavaScript?

To enable/disable input fields using JavaScript, the following approaches can be utilized in combination with the “disabled” property:

Approach 1: Enable/Disable Input Fields Using JavaScript Using onclick Event

An “onclick” event is used to redirect to the specified function. This event can be applied to invoke the corresponding function for enabling and disabling input fields upon the button click.

Example

Let’s have a look at the below-stated example:

< h2 >Enable / Disable Text Field

In the above-stated code, perform the following steps:

• Include an input “text” field having the specified “id” and “placeholder” values.
• Also, create two separate buttons with attached “onclick” events redirecting to two different functions for enabling and disabling the input fields respectively.

Let’s continue to the JavaScript part of the code:

let get = document. getElementById ( «input» )

let get = document. getElementById ( «input» )

In the above code snippet, perform the following steps:

• Declare a function named “disableField()”.
• In its definition, access the created input field by its “id” using the “document.getElementById()” method
• In the next step, apply the “disabled” property and assign it the boolean value “true”. This will result in disabling the input field upon the button click.
• Similarly, define a function named “enableField()”.
• In its definition, similarly, repeat the step discussed for accessing the input field.
• Here, assign the “disabled” property as “false”. This will result in enabling the disabled input field.

In the above output, it can be observed that the input field is disabled and enabled properly upon the corresponding button click.

Approach 2: Enable/Disable Input Fields Using JavaScript Using addEventListener() Method

The “addEventListener()” method is used to attach an event to the element. This method can be implemented to disable and enable an input field based on the attached event and the specified “key”.

• “event” refers to the name of the event.
• “function” points to the function to execute.
• “use” is the optional parameter.

Example

Let’s observe the below-stated example:

< h2 >Enable / Disable Text Field

In the above lines of code:

• Include the stated heading.
• In the next step, repeat the method discussed in the previous approach for including an input field having the specified “id” and “placeholder” values.

Let’s move on to the JavaScript part of the code:

let get = document. getElementById ( «input» )

get. addEventListener ( «keydown» , ( e ) => {

In the above code snippet, perform the following steps:

• Access the input field by its “id” using the “document.getElementById()” method.
• In the next step, apply the “addEventListener()” method and attach an event named “keydown”.
• In the further code, assign the “disabled” property as “false” for enabling the input field.
• Lastly, in the “else” condition, allocate the “disabled” property as “true” for disabling the enabled input field upon pressing the “Enter” key.

From the above output, it is evident that the input field becomes disabled upon pressing the “Enter” key.

Conclusion

The “disabled” property in combination with the “onclick” event or the “addEventListener()” method can be applied to enable/disable input fields using JavaScript. The former approach can be utilized to redirect to the corresponding function to enable/disable the input field upon the button click. The latter approach can be implemented to perform the required functionality based on the attached event and the specified “key”. This article explains how to enable/disable input fields in JavaScript.

About the author

Umar Hassan

I am a Front-End Web Developer. Being a technical author, I try to learn new things and adapt with them every day. I am passionate to write about evolving software tools and technologies and make it understandable for the end-user.

Источник

Enabling / Disabling Form Elements using JavaScript

The Enabling/Disabling element takes two values that is true or false, if we set to true then we can enable the element that means the user can edit the elements which user wants to do in the form or text box or else if it is set to be false then the element is disable that means you can’t do any changes or editing work in the particular form or in text box.

Syntax

document.getElementById("element_id").disabled=true/false

Enabling / Disabling Form Elements Example

      
Admission Form
 
Name:  
DOB:  
Does this pupil belong to our school: Yes No 
Name of the pupil: Relation with the Pupil: 
   

• In this program we have shown that how the enabling and disabling elements works
• We have used Yes and No button in the form. When we click on Yes button the following text box will be available to user to write further details in the form.
• if (document.getElementById(‘pupil’).checked == true) is used to call a element by using id and disabled is set to be true to make elements enable.
• onclick=”javascript:Degree();” this event works when we click on yes and it makes the following text box available to fill the information.

Enabling / Disabling Form Elements Demo

• Save the file as enabling_disabling.html in your system.
• Just open the file in the browser, you will see the below picture in the browser. Note that the browser must support HTML specification.

When the execution process is completed successfully we will get the following output:

Now check the “Yes” box and you would that the fields below this box are enabled as shown in the screen below:

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Источник