Enable form fields

Posted on : 06-03-2009 | By : admin | In : Javascript

1

formfieldsIf you do not want the end user to input information into your form until they agree to a condition, waiver, agreement, etc., you can simply disable the form fields until the user checks a box stating that they agree with the terms and conditions. This event handler calls a javascript function that enables the input fields allowing the user to supply their info. Check it out!

<html>
<head>
<script language="javascript">
 
function enableField()
{
document.input.dob.disabled=false;
document.input.idnumber.disabled=false;
document.input.submit.disabled=false;
document.input.reset.disabled=false;
chkbox.disabled=true;
}
</script>
 
</head>
<body>
 
<input type="checkbox" name="chkbox" onclick="javascript:enableField();">
    I agree to the TTECA Third Party Agreement<br />
    <form name="input" method="post" 
action=" ">     
  <p><label for="dob"><strong>Date of Birth:</strong> </label>
  <input type="text" name="dob" id="dob" disabled="true"/>
    <strong>(i.e. 03/10/1969 or 12/11/1970)</strong></p>
 
<p><label for="idnumber"><strong>ID Number:</strong> </label>
  <input type="text" name="idnumber" id="idnumber" disabled="true"/></p>
 
<p><input type="reset" name="reset" value="reset" disabled="true"/> 
  <input type="submit" name="submit" value="submit" disabled="true"/></p>
 
</form>
</body>
</html>

Each of our form fields above start out with an attribute/value pair of disabled=”true”. This means these form fields are disabled when the page is loaded; they are not active and therefore cannot accept any user interaction. There is a checkbox that has the purpose of allowing the user to agree to the terms and conditions (or whatever you may have in this sense) by checking the checkbox.

When the user checks the box, the checkbox has an event handler attached to it…

<input type="checkbox" name="chkbox" onclick="javascript:enableField();">

When clicked the event will trigger the javascript function “enableField()” and all the form field elements will become active; that is they will now have a attribute/value pair of disabled=”false”. The checkbox will also be changed to an attr/value pair of disabled=”true”, so that it cannot be checked again.

Yeah, no problem.

Comments (1)

RICHARD said on 21-07-2010


Medicamentspot.com. Canadian Health&Care.Best quality drugs.No prescription online pharmacy.Special Internet Prices. High quality pills. Order drugs online…

Buy:Actos.Valtrex.Lumigan.Petcam (Metacam) Oral Suspension.Accutane.Human Growth Hormone.Nexium.Mega Hoodia.Prednisolone.Zyban.Retin-A.Zovirax.Arimidex.Synthroid.100% Pure Okinawan Coral Calcium.Prevacid….

Write a comment