Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts

    disable submitting if field is empty

    hi,
    The function that i wrote below doesn't work:
    Code:
    function disablesend() {
    message = document.getElementById("comments"); //form field
    submit = document.getElementById("send"); //submit button
    
    submit.disabled = true;
    if (message.value != '') {
    submit.disabled = false;
    }
    }
    I'm not really sure if im doing this the proper way. I want the submit button disabled (grayed out, unclickable) by default. Then, when the user types something in the field, the submit button becomes active.

    How do i fix the code?

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Location
    FL, USA
    Posts
    734
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I would do this:

    Code:
    function disablesend() {
    message = document.formname.comment; //form field
    submit = document.formname.send; //submit button
    
    submit.disabled = true;
    if (message.value != '') {
    submit.disabled = false;
    }
    }
    CYWebmaster.com - See why we dot com!!
    ACJavascripts.com - Cut & Paste Javascripts!
    SimplyProgram.com - Personal Blog

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function enableDisableSend(oFld){
      oFld.form.send.disabled = (oFld.value == "") ? true : false;
    }
    </script>
    </head>
    <body onload="enableDisableSend(document.frmFeedback.comments)">
    <form name="frmFeedback" action="">
    <textarea name="comments" id="comments" onkeyup="enableDisableSend(this)" onblur="enableDisableSend(this)" onpaste="setTimeout('enableDisableSend(document.'+this.form.name+'.'+this.name+')', 10)"></textarea>
    <input type="submit" name="send" id="send" value="Send" />
    </form>
    </body>
    </html>
    The onpaste event handler is for IE to handle paste commands such as Edit->Paste and right-click->Paste. We need to delay a bit the calling of the function on onpaste to get the pasted value on time. The onblur handler is for non-IE browsers that don't support onpaste event.

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Hey! It works perfectly! Thanks a lot.
    Last edited by qwertyuiop; 04-19-2005 at 04:27 AM.

  • #5
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    It seems to conflict with an auto-focus function that I already set on the field.

    When you enter the page, the autofocus kicks in. BUT, the submit button is active. If you click outisde the field, then click back in, then the disablesend function works.

    The auto focus function is:
    Code:
    function autofocus() {
    document.getElementById("message").focus();
    }
    and it starts onload.
    EDIT: Nevermind! I found the problem. I forgot to change one of the values. Thanks a lot for the script glenngv!
    Last edited by qwertyuiop; 04-19-2005 at 04:33 AM.

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    There is one really tiny issue that would be nice if solved.

    Let's say this html is used:
    Code:
    <html>
    <head>
    <script type="text/javascript">
    function enableDisableSend(oFld){
      oFld.form.send.disabled = (oFld.value == "") ? true : false;
    }
    </script>
    </head>
    <body onload="enableDisableSend(document.frmFeedback.comments)">
    <form name="frmFeedback" action="" onsubmit="document.frmFeedback.comments.value='';return false;">
    <textarea name="comments" id="comments" onkeyup="enableDisableSend(this)" onblur="enableDisableSend(this)" onpaste="setTimeout('enableDisableSend(document.frmFeedback.comments)', 10)"></textarea>
    <input type="submit" name="send" id="send" value="Send" />
    </form>
    </body>
    </html>
    After submitting the first time, the field's contents are erased. But then the disabler doesn't disable the submit button until you "onfocus then onblur then onfocus" the field.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,968
    Thanks
    0
    Thanked 236 Times in 233 Posts
    You have to call enableDisableSend() again onsubmit.

    <form ... onsubmit="this.comments.value='';enableDisableSend(this.comments);return false;">

    But why are you erasing the value of the comment field onsubmit and cancelling the submission? This will make the form useless.

  • #8
    Regular Coder
    Join Date
    Jan 2004
    Location
    USA
    Posts
    364
    Thanks
    12
    Thanked 6 Times in 6 Posts
    Erasing the field's value was just to emulate what really happens. This isn't a regular form.

    Thanks, the calling of the function onsubmit works.


  •  

    Posting Permissions

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