www.webdeveloper.com
Results 1 to 5 of 5

Thread: Checkboxes and submit buttons?

Hybrid View

  1. #1
    Join Date
    Apr 2013
    Posts
    5

    Checkboxes and submit buttons?

    Hey, I'm quite new to javascript, and I have come to a bit of a sticking point which is (probably) easy to fix. Im trying to make the submit button active when th checkbox is checked, and greyed out when not checked.

    The code:
    Code:
    <p><input type="checkbox" id="termsChkbx" /></p>	      
    
    	    <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
    i know this gives me a greyed out submit button, but when i change it to:

    Code:
    <input type="checkbox" id="termsChkbx" onclick="hasReadTerms( this.id, 'sub1') /></p>    
    	    
    	    <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
      
    		<script type="text/javascript">
    		
    		function hasReadTerms( checkBoxID, buttonID ) {
    			// only enable the submit button if the accept terms box is checked
    			var termsChkbx = document.getElementById( checkBoxID );
    			var submitBtn = document.getElementById( buttonID );
       			if ( chkbx.checked ) {
    				submitBtn.disabled = false;
    			}
    			else {
    				submitBtn.disabled = true;
    			}
    </script>
    The submit button disappears and nothing changes when I check the box. Any help would be appreciated! Thanks!

  2. #2
    Join Date
    Dec 2012
    Posts
    99
    You might have to change it to something like

    Code:
    if ( chkbx.checked ) {
    	submitBtn.removeAttribute('disabled');
    }
    else {
    	submitBtn.setAttribute('disabled','true');
    }

  3. #3
    Join Date
    Apr 2013
    Posts
    5
    The biggest problem I'm having, is when coded like this:

    Code:
    <input type="checkbox" id="termsChkbx"  />
    I can check the box and the button is visable (and greyed out)

    However when the checkbox is:

    [CODE]
    <input type="checkbox" id="termsChkbx" onclick="hasReadTerms( this.id, 'sub1') />
    [CODE]

    I can not check the box, and the button disappears.(i dont think i explained it well in the first post)

  4. #4
    Join Date
    Jan 2010
    Posts
    77
    Hi bud

    You had three errors in your code you had missed the closing parentheses on your function hasReadTerms, but I am guessing that that was just a copying error when you were copying the function to post here, you were missing a double quote from the onclick of your input checkbox and finally you declared the variable “termsChbx” for the checkbox element but when you did your if statement you used “chbx”

    Here is the fixed version of your code
    Code:
    <input type="checkbox" id="termsChkbx" onclick="hasReadTerms( this.id, 'sub1')" /></p>    
    	    
    	    <p><input type="submit" name="submit" value="Order now!" id="sub1" disabled="disabled"/></p>
      
    		<script type="text/javascript">
    		
    		function hasReadTerms( checkBoxID, buttonID ) {
    			// only enable the submit button if the accept terms box is checked
    			var termsChkbx = document.getElementById( checkBoxID );
    			var submitBtn = document.getElementById( buttonID );
       			if ( termsChkbx.checked ) {
    				submitBtn.disabled = false;
    			}
    			else {
    				submitBtn.disabled = true;
    			}
                                                                    }
    </script>
    If your scripts don’t work you should have a look at the error console in your browser they normally tell you what line number your error is on and what the error might be like “line 23 undefined variable ckbx” or sum such thing

    V

  5. #5
    Join Date
    Apr 2013
    Posts
    5
    As hard as it is to believe, I had missed the closing perenteses, such a simple error!
    It works perfectly now, thanks man!

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