www.webdeveloper.com
Results 1 to 7 of 7

Thread: how to Disable enable submit button using javascript

  1. #1
    Join Date
    Jan 2007
    Posts
    78

    how to Disable enable submit button using javascript

    How can I have the submit button disabled by default, an enable it only if 2 specific input box values match. or If a specific form field is => than some value in another form field or hidden field, the Submit button is re-enabled. ( activated / unhidden)


    I don't want the user to click anything to re-activate or unhide the Submit button. If I can actually hide it at startup, and then unhide it based on the above conditions, that would also work, and possibly preferably.

    As it stands right now, my submit button is like this.

    <input class="btn" onclick="finalCheck(this.form)"
    tabindex="17" value="Process" type="button">

    I'm also interested in hiding a section of my page based also on input field values.

    Any ideas, suggestions, code etc.. etc.... welcome.

    Thanks

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Add the keyword "disabled" to the button. That will disable it by default. To enable it, add an onblur handler to the required form fields that tests for your criteria and if good, set the disabled property to false.
    Code:
    <script type="text/javascript">
    function checkEnableSubmit() {
      if (...) // some logic to determine if it is ok to go
        {document.getElementById("xx").disabled = false;}
      else // in case it was enabled and the user changed their mind
        {document.getElementById("xx").disabled = true;}
    }
    </script>
    ...
    <input type="button" id="xx" disabled ...>
    I have to ask - why don't you just do a "normal" form validation?

  3. #3
    Join Date
    Dec 2006
    Location
    Scotland
    Posts
    450
    Don't disable the submit button if you are trying to stop multiple submissions, some browsers don't like it. A more elegant way is to stop the submission like so:

    HTML Code:
    <form .. .. onsubmit="if (this.getAttribute('submitted')) return false; this.setAttribute('submitted','true');">
    'true' isn't needed, per se, it just needs to be a string value.
    Essential Links: DOM | JS | CSS
    ---
    #javascript on EfNet: Direct Link
    ---
    I've known you since you were a twenty, and I was twenty, and thought that some years from now, a purple little, little, lady will be perfect, for this dirty old and useless clown...
    Gogol Bordello

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    Another point - what if the user doesn't have javascript enabled?

  5. #5
    Join Date
    Jan 2007
    Posts
    78

    how to Disable enable submit button using javascript

    Thanks guys:

    Got that section to work OK! If the user does not have Javascript, they wont get to see the form. A PDF version is provided for them somewhere else.

    I'm interested in finding out if anyone has some sample code to hide/ unhide whole areas of a form based on the value of a specific input box.

    eg. if variable age >18 show additional fields.

    Thanks

  6. #6
    Join Date
    Mar 2010
    Posts
    1
    there is a reset button which will reset the connection and it takes two min for data loading during which the reset button has to be disabled and later after two mins it should enable the button for the user for next time.

    The code snippet is below:
    if (RibModel == GromitXL)
    stuff += "<input type=submit value=\"Reset Integrated Lights-Out 2\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";
    else
    stuff += "<input type=submit value=\"Reset Remote Insight\" onclick=\"return confirm('Data update takes 2 min. and a data collection interval - Do you really want to reset?');\">";

    stuff += "</form>";

    writeSingleTableRow(stuff, "");
    }

    Please help me with this.Its a kind of urgency.

    Thanks

  7. #7
    Join Date
    Mar 2010
    Posts
    2,803
    Quote Originally Posted by simora View Post
    Thanks guys:

    I'm interested in finding out if anyone has some sample code to hide/ unhide whole areas of a form based on the value of a specific input box.

    eg. if variable age >18 show additional fields.

    Thanks
    try something like this:

    Code:
     
    <input type="text" name="txtAge" onchange="chkAge(this.value);" />
     
    function chkAge(age) {
    // you'll need code to validate age to ensure it's a positive number
    if(age > 18) {
       document.getElementById("divId").style.display="block";
    } else {
       document.getElementById("divId").style.display="none";
    }
    divId is the container id of the part of the form you want to hide/display
    Last edited by tirna; 03-17-2010 at 04:46 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles