Robert Granlund
asked on
jQuery on Submit
I have a on submit function that is not working. I have a checkbox. On Submit I would like to check and see if the "Terms Of Service" checkbox has been checked. If it has not been checked do something else. However, what I have is not working. It always responds as if it is not checked:
<script>
$("#sole-proprietor").submit(function () {
if($("#customer_agreement").attr('checked') == true){
$("#customer_agreement").html("CUSTOMER AGREEMENT");
$("#customer_agreement").css("background-color", "#d9edf7");
} else {
$("#customer_agreement").html("CUSTOMER AGREEMENT :: <span style='color:red;'>You must agree to the Terms of Service</span>");
$("#customer_agreement").css("background-color", "#ffeeee");
}
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
However, what I have is not working. It always responds as if it is not checked:It will because you have written function for submit event and you have not written anything to stop/prevent submitting in simple term! As Julian, said
You have also not put in anything to prevent default behaviour of the form if the checkbox is NOT checked so either way the form will submit
Please try with below modified code block
<script>
$("#sole-proprietor").submit(function (e) {
if($("#customer_agreement").attr('checked') == true){
$("#customer_agreement").html("CUSTOMER AGREEMENT");
$("#customer_agreement").css("background-color", "#d9edf7");
} else {
e.preventDefault();
$("#customer_agreement").html("CUSTOMER AGREEMENT :: <span style='color:red;'>You must agree to the Terms of Service</span>");
$("#customer_agreement").css("background-color", "#ffeeee");
}
});
});
Hope it will work, other wise please provide more information
A note on using .attr('checked')
This is not advisable. Take a look at the following test
HTML
When .attr() is used it fires true every time because the original html has the attribute checked.
If the checked attribute is removed from the html then .attr() does not return a value when checked.
The correct method is to use one of the other 3 approaches.
According to https://jsperf.com/prop-vs-ischecked/5 the direct method is the quickest.
Working sample here
This is not advisable. Take a look at the following test
HTML
<input type="checkbox" checked value="10" id="test"/>
jQuery<script>
doCheck();
$(function() {
$('#test').change(function() {
doCheck();
});
});
function doCheck()
{
if ($('#test')[0].checked) console.log('checked on direct access');
if ($('#test').is(':checked')) console.log('checked on is access');
if ($('#test').prop('checked')) console.log('checked on prop access');
if ($('#test').attr('checked')) console.log('checked on attr access');
}
</script>/code]
Output on load
[code]checked on direct access
checked on is access
checked on prop access
checked on attr access
Output when box is clicked (off)checked on attr access
Output when it is checked on againchecked on direct access
checked on is access
checked on prop access
checked on attr access
When .attr() is used it fires true every time because the original html has the attribute checked.
If the checked attribute is removed from the html then .attr() does not return a value when checked.
The correct method is to use one of the other 3 approaches.
According to https://jsperf.com/prop-vs-ischecked/5 the direct method is the quickest.
Working sample here
Open in new window