checkbox - Javascript: two "I agree to terms checkboxes" on one page - Stack Overflow

admin管理员组

文章数量:1384604

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>&nbsp;</p>
<input type ="checkbox" name="agree_2" value="anything">

 <b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b>
 <p>&nbsp;</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>&nbsp;</p>
<input type ="checkbox" name="agree_2" value="anything">

 <b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b>
 <p>&nbsp;</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>

• javascript
• checkbox

Share Improve this question Follow edited May 8, 2011 at 3:24 CRM 4,64544 gold badges2828 silver badges3434 bronze badges asked May 8, 2011 at 3:17 PatPat 5111 gold badge22 silver badges66 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

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." 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>&nbsp;</p>
<input type="checkbox" name="agree_2" value="anything">

 <b>I Have Read And Agree To The Member Agreement/Terms And Conditions </b>
 <p>&nbsp;</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/

本文标签： checkboxJavascript two quotI agree to terms checkboxesquot on one pageStack Overflow