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 12 of 12
  1. #1
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts

    Disable / grey-out a button until all fields are filled

    Hi,

    I need help - I tried seraching the forum but I didn't find what I was looking for...

    I have a form with a few text inputs and a submit button.

    I would like the submit button to be greyed-out until all fields are filled by the user, so that he only can submit the form once everything is filled in.

    By the way, how can I disable, or what method can I use to disable the submit action when the user hits 'enter'?

    Thanks in advance!!
    Chuck Norris counted to infinity.
    Twice.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Have a look at http://codingforums.com/showthread.php?p=668901, here oesxyl explained a similar method in his 3rd reply.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Thanks... could not really figure it out... I am a javascript newbie and I think it's a bit complicated for what I want to achieve.

    I have only 3 fields and 1 submit button.

    I just want the submit button to become 'active' or 'enabled' once all 3 fields are filled with something...

    Here is my code:

    Code:
    <form name="form1" method="post" action="">
    
      <input name="title" type="text" id="title" size="20">
      <textarea name="description" cols="18" rows="5" id="description"></textarea>
      <input name="name" type="text" id="name" size="20">
    
      <input name="submit" type="submit" id="submit" value="Add Event" disabled="disabled">
    
    </form>
    Hope someone can help... Thanks!
    Chuck Norris counted to infinity.
    Twice.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Try this:-

    Note that it is not a good idea to assign the name "name" or "submit" to an entity as these are HTML tags and can cause confusion. I have changed them.

    Code:
    <form name="form1" method="post" action="">
    
      <input name="title" type="text" id="title" size="20" onblur = "checkFilled()">
      <textarea name="description" cols="18" rows="5" id="description" onblur = "checkFilled()"></textarea>
      <input name="theName" type="text" id="name" size="20" onblur = "checkFilled()">
    
      <input name="submit" type="submit" id="submitForm" value="Add Event" disabled="disabled">
    
    </form>
    
    <script type = "text/javascript">
    
    function checkFilled() {
    var filled = 0
    var x = document.form1.title.value;
    x = x.replace(/^\s+/,"");  // strip leading spaces
    if (x.length > 0) {filled ++}
    
    var y = document.form1.description.value;
    y = y.replace(/^s+/,"");  // strip leading spaces
    if (y.length > 0) {filled ++}
    
    var z = document.form1.theName.value;
    z = z.replace(/^s+/,"");  // strip leading spaces
    if (z.length > 0) {filled ++}
    
    if (filled == 3) {
    document.getElementById("submitForm").disabled = false;
    }
    else {document.getElementById("submitForm").disabled = true}  // in case a field is filled then erased
    
    }
    
    </script>
    Last edited by Philip M; 05-06-2008 at 04:00 PM.

  • Users who have thanked Philip M for this post:

    Arnaud (05-06-2008)

  • #5
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hi,

    Thanks for your reply. I will make sure I change the names and id's to something different. I'll try your code now. Thanks.
    Chuck Norris counted to infinity.
    Twice.

  • #6
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Well, thanks, it works fine. The only thing is that it doesn't enable the button when filling the last field but only when I click out of the field (once they are all filled) - any idea?
    Chuck Norris counted to infinity.
    Twice.

  • #7
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    OK - forget my last post.

    I changed the onblur to onKeyUp and it's working fine now.

    Thanks again for your help!
    Chuck Norris counted to infinity.
    Twice.

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    because they are being called like onblur = "checkFilled()"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Arnaud View Post
    OK - forget my last post.

    I changed the onblur to onKeyUp and it's working fine now.

    Thanks again for your help!
    What is to say that the user fills in the three fields in order? I would leave it as onblur. What is wrong with that? You say you want to enable the button only when the three fields have content.

  • #10
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hi Philip,

    I am not expecting users to fill in the fields in a specific order.

    What is 'wrong' with using the onblur is that once the user filled the last field (being any of the 3 fields) - the button is still not active. The user would have to click anywhere on the page (but not on the button itself that is still disabled) to activate the button.

    I would expect the button to be active as soon as the last field (once again, any of the 3) contains some data, so that I can click the submit button right away. Therefore I called the function using the onkeyup statement instead of onblur, so that now, as soon as I type something in the 3rd field (having already filled in the 2 others), the button activates and I don't need to click somewhere to make it active.

    Would the onkeyup be inappropriate in that situation?

    By the way, I repost the code below I think there was a missing back\slash in the y and z replace(/^s+/,""); in the code example.

    Code:
    <form name="form1" method="post" action="">
    
      <input name="title" type="text" id="title" size="20" onkeyup = "checkFilled()">
      <textarea name="description" cols="18" rows="5" id="description" onkeyup = "checkFilled()"></textarea>
      <input name="theName" type="text" id="theName" size="20" onkeyup = "checkFilled()">
    
      <input name="submit" type="submit" id="submitForm" value="Add Event" disabled="disabled">
    
    </form>
    
    <script type = "text/javascript">
    
    function checkFilled() {
    	var filled = 0
    	var x = document.form1.title.value;
    	x = x.replace(/^\s+/,"");  // strip leading spaces
    	if (x.length > 0) {filled ++}
    	
    	var y = document.form1.description.value;
    	y = y.replace(/^\s+/,"");  // strip leading spaces
    	if (y.length > 0) {filled ++}
    	
    	var z = document.form1.theName.value;
    	z = z.replace(/^\s+/,"");  // strip leading spaces
    	if (z.length > 0) {filled ++}
    	
    	if (filled == 3) {
    		document.getElementById("submitForm").disabled = false;
    	}
    	else
    	{
    		document.getElementById("submitForm").disabled = true
    	}  // in case a field is filled then erased
    }
    </script>
    Anyway, now it works exactly like I want!

    Thanks again for your help.
    Chuck Norris counted to infinity.
    Twice.

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,731
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    OK, I understand now what you are getting at. But to perform the check and run the script on every keystroke seemed a bit OTT. I guess I am old- fashioned!

    By the way, I repost the code below I think there was a missing back\slash in the y and z replace(/^s+/,""); in the code example.

    Yes, it is good to see that you are alert and have noticed my deliberate mistake!

  • #12
    Regular Coder
    Join Date
    Jan 2008
    Location
    Geneva, Switzerland
    Posts
    413
    Thanks
    12
    Thanked 29 Times in 29 Posts
    Hey I said I was a javascript newbie - not a total dumb*ss

    Cheers
    Chuck Norris counted to infinity.
    Twice.


  •  

    Posting Permissions

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