Three ways to _javascript the button after clicking the Submit button Gray unavailable state technique

Source: Internet
Author: User
Tags nets

The first method: join in the direct button

When you click Submit, the Submit button becomes grayed out, which prevents duplicate submissions, and this code is the implementation of such a function. As you can see from the code, we just add this sentence to the submit button: onclick= "Javascript:{this.disabled=true;document.form1.submit ();", meaning that when the button is clicked, Set the unavailable property of the button to true so that the button becomes dimmed

<ptml> <pead> <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "> <title> form Submit button turns gray </title> </pead> <body> <form name=form1 method=" POST "action="/"target=_blank> <p><input type=" text "name=" T1 "size=" "><input type=" button "value = "Submit" onclick= "Javascript:{this.disabled=true;document.form1.submit ();}" > <input type= "reset" value= "reset" name= "B2" ></p> </form> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

The second method is implemented by the OnSubmit event, and the dimmed button can be turned into usable

Add the OnSubmit event to the form, and if the form joins the judge, then the method can be used directly, remember to put it in the end, otherwise it would be grayed out at first, but we added a code that makes the Submit button available.
You can prevent duplicate submissions or prevent code problems from being uncommitted

Copy Code code as follows:

<form name=form1 action= "" onsubmit= "return Closebut ()" >
<input name= "ImageField" type= "Submit" class= "Inputbut" value= "OK"/><br>
<input type= "button" name= "hui" id= "hui" value= "make the Submit button available" onclick= "Document.form1.imagefield.disabled=false"/>
</form>
<script>
function Closebut () {
Document.form1.imagefield.disabled=true;
}
</script>

Third, similar to the above

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html;charset=gb2312 "> <meta name=" keywords "content=" webmaster, Web effects, JS effects, JS script, script, ad code "/> <meta name=" Description "content=" www.jb51.net, webmaster special effects nets, webmaster necessary JS special effects and advertising code. A large number of high-quality JS special effects, to provide high-quality advertising code download, to do in webmaster effect nets "/> <title> Web page effects form submitted after the button gray effect of three </title> </pead> <body> cloud Habitat community, Webmaster Required high-quality Web page special effects and advertising code. <pr> <!--Welcome to the cloud Habitat community, our site collects a large number of high-quality JS special effects, providing a lot of advertising code download, URL: www.jb51.net, with. NET to build Liang station--> <script language= " JavaScript > Function submitonce (jb51_net) {if document.all| | document.getElementById) {for (i=0;i<jb51_net.length;i++) {var tempobj=jb51_net.elements[i]; if (tempobj.type.toLowerCase () = = "Submit" | | Tempobj.type.toLowerCase () = = "reset") tempobj.disabled=true; }}//Welcome to Webmaster effects nets, our web site is www.jb51.net, very well, ZZ Webmaster, JS is JS special effects, this site collects a large number of High-quality JS code, there are many advertising code download. ,;/script> <form action= "http://www.jb51.net" method= "post" name= "Jb51_net" onsubmit= "submitonce (This)" > <input type= "text" name= "name" > <input type= "Submit" Name= "Submit1" value= "Submit" > </form> </body > </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.