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='' 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="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" onClick="check_agree(this.form);check_agree_2(this.form)" value="Continue To Shopping Cart">
</form>
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.' 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="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" onClick="check_agree(this.form);check_agree_2(this.form)" value="Continue To Shopping Cart">
</form>
3 Answers
Reset to default 2Replace 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." 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/XZyjw/