Page 1 of 2 12 Last
  • Jump to page:
    #1
  1. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19

    Button Disable When Textbox Empty


    Hi all,

    I want to disable the submit bullon when the textbox is empty,

    Code:
    <script type="text/javascript">
    
    function enableField()
    {
    document.graffiti.submit.disabled=false;
    }
     
    </script>
    ---------------------------------------------------------------

    Code:
              <input id="painttext" onkeyup="javascript:enableField()" type="text" name="painttext" class="tag-inputbox" size="30" maxlength="50" />
              <input id="submit" name="submit" disabled="true" type="button" class="tag-button" onclick="addtag(this.value)" value="<?php echo $tag_button_text; ?>" />
    ---------------------------------------------------------------

    But what i have done just dont work at all..... can some one help me with this ?

    Thanks
  2. #2
  3. (retired)
    Devshed Supreme Being (6500+ posts)

    Join Date
    Dec 2003
    Location
    The Laboratory
    Posts
    10,054
    Rep Power
    1390
  4. #3
  5. Application is what Divides Us
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2002
    Location
    Titusville, FL
    Posts
    2,177
    Rep Power
    62
    Change "submit" to "bttnsubmit" and try again.
    Download [ Fx | Op ] Validate [ Markup | Css ]
  6. #4
  7. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19
    Originally Posted by jsKid
    Change "submit" to "bttnsubmit" and try again.
    That dont work as well
  8. #5
  9. Application is what Divides Us
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Dec 2002
    Location
    Titusville, FL
    Posts
    2,177
    Rep Power
    62
    How about...
    Code:
    function toggleButton(ref,bttnID){
      document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
    }
    <input ... onkeyup="toggleButton(this,'bttnsubmit');">
    <input ... disabled='disabled' id='bttnsubmit' ... >
    Download [ Fx | Op ] Validate [ Markup | Css ]
  10. #6
  11. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19
    That done the trick.... thanks!

    Now all i have to do is get it to go back to being disabled when the post has been made, I'm using AJAX to post with so there is no page refresh.
    Last edited by donpearson; May 12th, 2006 at 05:10 AM.
  12. #7
  13. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Aug 2005
    Location
    Bucharest ROMANIA
    Posts
    2,524
    Rep Power
    608
    use DOM:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    enableField(f,v){
    v.length<1?f['bttnsubmit'].setAttribute('disabled',true):f['bttnsubmit'].removeAttribute('disabled');
    }
    </script>
    </head>
    <body>
    <form>
    <textarea onkeyup="enableField(this.form,this.value)"></textarea>
    <br>
    <input type="submit" value="Submit" name="bttnsubmit" disabled="true">
    </form>
    </body>
    </html> 
  14. #8
  15. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19
    Originally Posted by KorRedDevil
    use DOM:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script type="text/javascript">
    function 
    enableField(f,v){
    v.length<1?f['bttnsubmit'].setAttribute('disabled',true):f['bttnsubmit'].removeAttribute('disabled');
    }
    </script>
    </head>
    <body>
    <form>
    <textarea onkeyup="enableField(this.form,this.value)"></textarea>
    <br>
    <input type="submit" value="Submit" name="bttnsubmit" disabled="true">
    </form>
    </body>
    </html> 
    Thanks

    But do you know how i can get the button to disable again once the post has been made ?
  16. #9
  17. Contributing User
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Aug 2005
    Location
    Bucharest ROMANIA
    Posts
    2,524
    Rep Power
    608
    It is anyway HTML disabled by default. Whenever the session is changed, the button should regain it's default disabled status.
  18. #10
  19. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19
    Its not tho..... the page dose not refresh on post..
  20. #11
  21. (,,,)( '.' )(,,,)
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2003
    Location
    Looking at my screen
    Posts
    481
    Rep Power
    19
    I have it sorted now thanks

    Code:
    document.getElementById('bttnsubmit').disabled=true
    Thanks for all your help
  22. #12
  23. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    5
    Rep Power
    0
    Originally Posted by jsKid
    How about...
    Code:
    function toggleButton(ref,bttnID){
      document.getElementById(bttnID).disabled= ((ref.value !== ref.defaultValue) ? false : true);
    }
    <input ... onkeyup="toggleButton(this,'bttnsubmit');">
    <input ... disabled='disabled' id='bttnsubmit' ... >
    Thank you! It worked for me. With one textbox.
    I need the same thing with four textboxes and one listbox.
    The condition is: Submit Button enabled only when all four textboxes contain some text, AND listbox1 contains at least two values. If even one of textboxes is empty, or listbox1 contains 1 value - submut button is disabled.
    Can you please give me a function?
  24. #13
  25. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2004
    Location
    Hampshire, UK
    Posts
    989
    Rep Power
    319
    Try this... it was all written in the small quick reply box, so if there are any syntax errors forgive me.

    Code:
    <script type="text/javascript">
        function toggleButton() {
            var textValue = document.getElementById("txt1").value;
            var isValid = textValue.replace(/(^\s+)|(\s+$)/g, "").length > 0;
    
            isValid &= textValue == document.getElementById("txt2").value;
            isValid &= textValue == document.getElementById("txt3").value;
            isValid &= textValue == document.getElementById("txt4").value;
     
            var options = document.getElementById("list").options;
            var selected = 0;
            for (var i = 0; i < options.length && selected < 2; i++)
                if (options[i].selected)
                    selected++;
            
            isValid &= selected == 2;
    
            document.getElementById("btnSubmit").disabled = !isValid;
        }
    </script>
    
    <input type="text" id="txt1" onkeyup="toggleButton()" />
    <input type="text" id="txt2" onkeyup="toggleButton()" />
    <input type="text" id="txt3" onkeyup="toggleButton()" />
    <input type="text" id="txt4" onkeyup="toggleButton()" />
    
    <select multiple="multiple" id="list" onchange="toggleButton()">
        <option value="op1">text1</option>
        <option value="op2">text2</option>
        <option value="op3">text3</option>
        <option value="op4">text4</option>
    </select>
    
    <input type="submit" value="Submit" id="btnSubmit" disabled="disabled" />
    You could streamline the code with periodic checks to see if isValid is true and return from the method... but this is just the basic idea

    Should do the trick
    Scott Perham, BSc (hons), CCNA, MCPD
  26. #14
  27. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2008
    Posts
    5
    Rep Power
    0
    Originally Posted by scoper
    Try this... it was all written in the small quick reply box, so if there are any syntax errors forgive me.

    Code:
    your code
    You could streamline the code with periodic checks to see if isValid is true and return from the method... but this is just the basic idea
    Should do the trick
    First af all, thank you for your quick reply.
    I forgot to mention that it's a ASP.NET app, so I changed the HTML of my server: <asp:TextBox, <asp:ListBox e.t.c.
    It didn't work. The submit button remains disabled.

    I made a model screen of what I need. Take a look:

    http://imagesjack.us/uploads/c983550888.jpg

    You see all 4 textboxes and ListBox.
    (5-th textbox is for addig a word to listbox. Btw when I add a word to listbox, button "Add" fires postback. Maybe it affects somehow.)
    How can I do my submit button activate when 4 textboxes not empty and listbox contains 2 items?
  28. #15
  29. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jun 2004
    Location
    Hampshire, UK
    Posts
    989
    Rep Power
    319
    You have to remember that the id of the controls will be determined by the naming container that the controls are put inside. (Probably a form)

    Therefore when you call getElementById in the client script, you must pass in the id of the control assigned to it by its parent naming container.

    This can simply be done by sticking some server tags inside your client script... like so:

    Code:
    <script type="text/javascript">
    document.getElementById("<%= txt1.ClientID%>");
    </script>
    <asp:textbox runat="server" id="txt1" onkeyup="..." />
    Scott Perham, BSc (hons), CCNA, MCPD
Page 1 of 2 12 Last
  • Jump to page:

IMN logo majestic logo threadwatch logo seochat tools logo