www.webdeveloper.com
Results 1 to 2 of 2

Thread: JavaScript function to make button active

Hybrid View

  1. #1
    Join Date
    Apr 2009
    Posts
    346

    JavaScript function to make button active

    I need to force the user of a web page to accept the terms of use agreement before being allowed to proceed. To accept the terms, the user just needs to click a checkbox. I then want the "Next" button located below it to then become active. Can this be done with a JavaScript function?

  2. #2
    Join Date
    Oct 2012
    Posts
    42
    Example HTML
    HTML Code:
    <form name="terms" id="terms" method="post" action="process.php">
    	<input type="checkbox" id="accept_terms" value="accept"/><label for="accept_terms">I accept the terms and conditions</label>
    	<input type="submit" id="terms_submit" value="Submit" />
    </form>
    Code:
    // jQuery
    $(document).ready(function(){
    	// disable submit button on page load using javascript
    	$('#terms_submit').attr({ "disabled" : true });
    
    	// toggle submit button disabled state based on state of check box, triggered when uses clicks on check box / label
    	$('#accept_terms').click(function(){
    		$('#terms_submit').attr({ "disabled" : !$('#accept_terms').attr('checked') });
    	});
    })
    
    // vanilla javascript
    window.onload = function(){
    	// disable submit button on page load using javascript
    	document.getElementById('terms_submit').disabled = true;
    	
    	// toggle submit button disabled state based on state of check box, triggered when uses clicks on check box / label
    	document.getElementById('accept_terms').onclick = function(){
    		document.getElementById('terms_submit').disabled = !document.getElementById('accept_terms').checked;
    	}
    }

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