Form Submit - disable on submit
Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<script language="javascript"> function getElementById(elementId){ var htmlElement = document.all ? document.all[elementId] : document.getElementById(elementId); return htmlElement; } // disable form element function disable(elementId){ var elementObject = getElementById(elementId); if(elementObject!="undefined"){ elementObject.disabled = true; } } // enable form element function enable(elementId){ var elementObject = getElementById(elementId); if(elementObject!="undefined"){ elementObject.disabled = false; } } //------------------------------ function checkForm(){ // implement own code here var nickname = getElementById("nickname"); if(nickname===undefined || nickname.value.length < 2){ var info="Enter a nickname with at least 3 letters"; getElementById("info").innerHTML = info; //alternatively alert(info); return false; } return true; } function doEnable(){ getElementById("info").innerHTML =""; enable('mybutton'); return false; } function submitForm(){ var checkSuccessful= checkForm(); if (checkSuccessful===false){ return false; } disable('mybutton'); // ajax submit call would be good here // process.... // enable('mybutton'); getElementById("info").innerHTML ="Form submitted, button stays disabled"; // remove this line in final code usage checkSuccessful=false; // hack to allow final state to remain visible when testing return false; } </script> <h2>Form Submit - disable on submit</h2> <form id="myform" name ="myform" onsubmit="return submitForm();" method="post"> Nickname: <input id="nickname"> <br> <input type="submit" id="mybutton" value="Submit This Now!"> <span id="info"></span> <a href="#" onClick="return doEnable();"> Enable Submit Button</a> </form> |
