Javascript: two "I agree to terms checkboxes" on one page
I have two agreements that a user must "agree" to by checking two different boxes (1 for each agreement) before continuing on to the shopping cart. If no boxes are checked, both alerts notify them to "agree" before continuing on 1 at a time, as well as each individually. However, the "submit button" wont submit and continue on when both are checked. How can I get the following to work?
Both unchecked? Alert 1
#1 unchecked? Alert 2
#2 unchecked? Alert 3
Please help!
<script language="Javascript">
function check_agree (form) {
if (form.agree.checked) {
}
else { alert('You must agree to the application agreement terms before continuing.'); }
}
form.submitButton.disabled = true;
function check_agree_2 (form) {
if (form.agree_2.checked) {
}
else { alert('You must agree to both!'); }
}
form.submit()
</script>
html
<form action='http://webisite.com' method='post' onSubmit="return false;">
<p>
<span style="text-align: center">
<input type ="checkbox" name="agree" value="anything">
<b>I Agree To And Understand The Charges That Will Be Processed To My Credit Card</b></span></p>
<p> </p>
<input type ="checkbox" name="agree_2" value="anyth开发者_运维知识库ing">
<b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b>
<p> </p>
<span style="text-align: center">
<input type="submit" name="submitButton" onClick="check_agree(this.form);check_agree_2(this.form)" value="Continue To Shopping Cart">
</form>
Replace check_agree, remove check_agree_2, and change the submit button.
function check_agree(form) {
if (form.agree.checked && form.agree_2.checked) {
return true;
} else if(!form.agree.checked) {
alert('You must agree to the application agreement terms before continuing.');
} else if(!form.agree_2.checked) {
alert('You must allow us to charge your credit card.');
}
return false;
}
html
<input type="submit" name="submitButton" onClick="check_agree(this.form)" value="Continue To Shopping Cart">
Perhaps try this:
<script type="text/javascript">
function check_agree (form) {
if (form.agree.checked && form.agree_2.checked) {
return true;
}
if (form.agree_2.checked) {
alert('You must agree to the application agreement terms before continuing.');
}
else if (form.agree.checked) {
alert("message #2!");
}
else {
alert('You must agree to both!');
}
return false;
}
</script>
...with this:
<form action="http://webisite.com" method='post' onsubmit="return check_agree(this);">
<p>
<span style="text-align: center">
<input type="checkbox" name="agree" value="anything">
<b>I Agree To And Understand The Charges That Will Be Processed To My Credit Card</b></span></p>
<p> </p>
<input type="checkbox" name="agree_2" value="anything">
<b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b>
<p> </p>
<span style="text-align: center;">
<input type="submit" name="submitButton" value="Continue To Shopping Cart">
</form>
Why do you like to alert
the user? I don't think it's a good experience.
In my opinion, you can just disable the submit button until all the checkboxes are checked.
Here is an example:
HTML:
<input type="checkbox" id="cb1">I Agree To And Understand The Charges That Will Be Processed To My Credit Card<br>
<input type="checkbox" id="cb2">I Have Read And Agree To The Member Agreement/Terms And Conditions
<input type="submit" id="button" value="Submit">
JavaScript:
var cb1 = document.getElementById("cb1"),
cb2 = document.getElementById("cb2"),
button = document.getElementById("button");
button.disabled = true;
cb1.onclick = cb2.onclick = function(){
if(cb1.checked && cb2.checked){
button.disabled = false;
}
else{
button.disabled = true;
}
};
You can see a live demo here: http://jsfiddle.net/XZyjw/
精彩评论