Forum Moderators: open

Message Too Old, No Replies

Simple HTML Script

         

bmahnken

7:05 pm on Jul 20, 2007 (gmt 0)

10+ Year Member



I am looking for a very basic script. All I need it to do is have a check box to acknowledge they have read the text and 2 buttons. One SUBMIT button to go to the next page if they check the box, the other a CANCEL button to return to the home page.

Can anybody out there help me out?

Thanks

Trace

8:15 pm on Jul 20, 2007 (gmt 0)

10+ Year Member



Here ya go;

<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>

Xapti

7:19 am on Jul 21, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I'm not strong in javascript (I don't code with it much), but I do understand all that code.
Do you really need that function enableButton() part?
Doesn't just clicking a checkbox toggle it's status atuomatically (without JS), and you can just EXAMINE the box's status with javascript when the submit button is pressed?

and bmahnken, you should post in the javascript section for javascript information.

[edited by: Xapti at 7:20 am (utc) on July 21, 2007]

rocknbil

6:47 pm on Jul 21, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



You're missing the point that he wants the form to load with the button disabled and re-enable it when the box is clicked. :-) However there are still some problems with that solution.

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!

deMorte

8:54 am on Aug 9, 2007 (gmt 0)

10+ Year Member



I'm new to this forum so I'm not sure if this should go here, but my solution to your problem would be to use PHP (like you, I'm not big on using JavaScript).

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]