I have form in a emerce solution. I dont have access to the code other than that i can add a footer and header. So i can write some js and css codes.

I want to add a checkbox which i can by using

  <input type="checkbox"  name="checkbox1" class="default-input sale-text-req"/>Please read the <a href="#">Terms and Conditions</a>

I want to make sure that form is not submitted until the checkbox is selected. I do have the name/id of the order button. Any idea how this can be achieved

Thanks

Prady

I have form in a emerce solution. I dont have access to the code other than that i can add a footer and header. So i can write some js and css codes.

I want to add a checkbox which i can by using

  <input type="checkbox"  name="checkbox1" class="default-input sale-text-req"/>Please read the <a href="#">Terms and Conditions</a>

I want to make sure that form is not submitted until the checkbox is selected. I do have the name/id of the order button. Any idea how this can be achieved

Thanks

Prady

• javascript
• jquery

3 Answers 3

Bind validation to your form's submit event like so:

$("form").submit(function (e) {
    if(!$("input[name='checkbox1']").is(":checked")) {
        e.preventDefault();
    }
});

Another option would be to prevent the submit button from being enabled until the user has selected the terms and conditions. You could also bake more validation in, in this form:

 function checkTerms() {
     if(document.formname.checkboxname.checked)
     {
         document.formname.submitname.disabled=false;
     }
     else
     {
         document.formname.submitname.disabled=true;
     }
 }

OR with JQuery:

 function checkTerms() {
     if($('input[name="checkbox1"]').is(":checked")
     {
         $('input[name="submitname"]').attr('disabled', 'disabled');
     }
     else
     {
         $('input[name="submitname"]').removeAttr('disabled');
     }
 }

Finally on your checkbox you would fire the validation when the click occurs:

 <input type="checkbox"  name="checkbox1" class="default-input sale-text-req" onclick="checkTerms();"/>

In the onsubmit attribute, check for the value of the element. If it's unchecked, use return false.