Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

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");
            }
        });
    });

Open in new window

Avatar of Mukesh Yadav
Mukesh Yadav
Flag of India image

Try this:

       
$("#sole-proprietor").submit(function () {
    if($("#customer_agreement").is(':checked')){
                $("#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");
            }
        });
    });

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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");
            }
        });
    });

Open in new window

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
<input type="checkbox" checked value="10" id="test"/>

Open in new window

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

Open in new window

Output when box is clicked (off)
checked on attr access

Open in new window

Output when it is checked on again
checked on direct access
checked on is access
checked on prop access
checked on attr access

Open in new window


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