Forum Moderators: open
<script type="text/javascript">
function submitClick(){
document.location.href='http://www.google.com';
}
function cancelClick(){
document.location.href='http://www.yahoo.com';
}
function enableButton(){
if(document.getElementById('chkBox').checked){
document.getElementById('submitbutton').disabled = false;
}else{
document.getElementById('submitbutton').disabled = true;
}
}
</script>
<form action="" method="">
<input type="checkbox" id="chkBox" onclick="enableButton()" /> Check to accept
<input type="button" value="submit" onclick="submitClick()" id="submitbutton" disabled />
<input type="button" value="cancel" onclick="cancelClick()" />
</form>
and bmahnken, you should post in the javascript section for javascript information.
[edited by: Xapti at 7:20 am (utc) on July 21, 2007]
1. If Javascript is disabled, you are hosed. Input type="button" will do nothing at all, use a submit button instead, and return false onSubmit of the form - this will prevent the form from submitting if Javascript is enabled. Losing even one sale is just not worth Javascript dependence.
2. For the same reason (I actually almost forgot this!) if you hard-code disabled and JS is also disabled, you will never allow the user to agree, the button stays disabled and all they can do is cancel. Which I'd probably do if that were the only option I were presented. :-) Note the window.onload which disables the button if JS is enabled and functioning.
3. For the same reason above, you need a name attribute on the checkbox to capture the input server-side to screen it there as well. In this case, no_javascript.cgi will capture those that have JS disabled, or are trying to get out of your agreement by intentionally disabling Javascript. It happens.
<script type="text/javascript">
function checkCheckbox(){
document.location=(document.getElementById('chkBox').checked==true)?
'http://www.google.com':'http://www.yahoo.com';
//PUT THE PREVIOUS ALL ON ONE LINE
return false;
}
function enableButton(){
document.getElementById('submitbutton').disabled =
(document.getElementById('chkBox').checked)?false:true;
//PUT THE PREVIOUS ALL ON ONE LINE
}
window.onload = function() { document.getElementById('submitbutton').disabled=true; };
</script>
<form action="no_javascript.cgi" onSubmit="return checkCheckbox();">
<input type="checkbox" name="chkBox" id="chkBox" onclick="enableButton()"> Check to accept
<input type="submit" value="I Agree" id="submitbutton">
<input type="submit" value="I Do Not Agree">
</form>
Welcome aboard bmahnken!
Here is one way to do your form:
examplepage.php:
<?php
if( $_POST ) {if( $_POST["cancel"] ) {
header("Location: http://www.example.com/home_page.html");
exit;
}if( $_POST["next"] && $_POST["accept"]) {
}
header("Location: http://www.example.com/next_page.html");
}
}
?>
<body>
<form action="<?php print $_SERVER["PHP_SELF"]?>" method="post">
I accept
<input type="checkbox" name="accept" value="1"><br>
<input type="submit" name="next" value="Next">
<input type="submit" name="cancel" value="Cancel">
</form>
</body>
This is a very barebone presentation. With this solution you can add an error message (if "Next" button is pressed and checkbox isn't checked).
[edited by: deMorte at 9:19 am (utc) on Aug. 9, 2007]