accept_terms

0 comments

Restrict user submit form until they agree terms and conditon


Purpose:

Almost every organization signup form there have a option that is a check

box is provided below the form and you have been told to read their terms

and condition if you agree then checked a checkbox.

Lets code:

We need a simple form with one name field one check box and a submit button

the form are below:

<form action="#" name="read">
  <p> <label>Name:</label><input type="text" >  </p>
<p>
  <input name="chk" type="checkbox" value="yes" id="agree"><label>I have Read the terms and conditions</label> </p>
    <p> <input type="submit" value="submit" id="sub">  </p> 
</form>


<script src="http://code.jquery.com/jquery-1.8.3.js" ></script>
    <script>
    $(function(){
var but=$('#sub');  
but.attr('disabled','disabled');
$('#agree').change(function(e){  
if(this.checked)
{
but.removeAttr('disabled');
}
else
{
but.attr('disabled','disabled')
}
})
});
    </script>

Demonstration:

first of all we use jquery library and create a envirnment where we can use jquey code

step-1:we grab the submit button and hold it to a variable called but.

stpp-2:Then we disabled the submit button by using jquery function attr. We can disabled the button directly.After that,we may enable the button by jquery. But we did not do it because if a visitor's browser javascript turn off then he can not able to submit the form.so we disable the submit button by using jquery.

step-3:we select checkbox by using its id and then add a function change.this function will run when checkbox is changed.It means each time checkbox become checked or unchecked it will execute.

step-4:Now we give a condition that if the checkbox is checked.(In this function keyword 'this' means the checkbox itself).Then we have to enable the submit button. Because visitor already read and agreed our terms and conditon.

step-5:But again visitor may uncheked the checkbox that time submit button still enable.so to prevent that type of unexpected situation we should give a else conditon.In else conditon we told if the above conditon is not fulfill then again disable the button.


Preview:





There are many cool and exciting tutorial like this will come shortly.

 

Copyright 2010 All Rights Reserved E-tech institute of IT.