hey guys.
I have a contact form as so
<form method="post" action="contact_data.php" class="add-contact-form">
<fieldset>
<legend>Add Contact</legend>
<p>Salutation :
<select name="salutations">
<option value="" disabled selected>Choose</option>
<option value="Datin">Datin</option>
<option value="Datin Paduka">Datin Paduka</option>
<option value="Dato Paduka">Dato Paduka</option>
<option value="Dato'">Dato'</option>
<option value="Dato' Seri">Dato' Seri</option>
<option value="Datuk">Datuk</option>
<option value="Datuk Seri">Datuk Seri</option>
<option value="Dr.">Dr.</option>
<option value="Haji">Haji</option>
<option value="Hajjah">Hajjah</option>
<option value="HM">HM</option>
<option value="HRH">HRH</option>
<option value="Miss">Miss</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
<option value="Pehin">Pehin</option>
<option value="Professor">Professor</option>
<option value="Raja">Raja</option>
<option value="Tan Sri">Tan Sri</option>
<option value="Tengku">Tengku</option>
<option value="Tuanku">Tuanku</option>
<option value="Tun">Tun</option>
<option value="Tunku">Tunku</option>
<option value="Ungku">Ungku</option>
</select></br>
<label class="salute-label">*If a person has many salutations, choose the highest form of salutation*</label>
</p>
<div style="height:0"><label>First Name :</label><input type="text" name="fname" required /></div>
<div style="float:right;"><label>Last Name :</label><input type="text" name="lname" required /></div>
<div style="clear:both"> </div>
NOTICE THIS LINE ->>
<div ><label>Spouse ? </label><input type="radio" name="yes" id="spouse-yes"/>Yes<input type="radio" name="no" id="spouse-no"/>No</div>
BEGIN DIV ------>>>>>>
<div class="spouse">
<p>Salutation :
<select name="spouse-salutations" id="spouse-salutations">
<option value="" disabled selected>Choose</option>
<option value="Datin">Datin</option>
<option value="Datin Paduka">Datin Paduka</option>
<option value="Dato Paduka">Dato Paduka</option>
<option value="Dato'">Dato'</option>
<option value="Dato' Seri">Dato' Seri</option>
<option value="Datuk">Datuk</option>
<option value="Datuk Seri">Datuk Seri</option>
<option value="Dr.">Dr.</option>
<option value="Haji">Haji</option>
<option value="Hajjah">Hajjah</option>
<option value="HM">HM</option>
<option value="HRH">HRH</option>
<option value="Miss">Miss</option>
<option value="Mrs.">Mrs.</option>
<option value="Mr.">Mr.</option>
<option value="Pehin">Pehin</option>
<option value="Professor">Professor</option>
<option value="Raja">Raja</option>
<option value="Tan Sri">Tan Sri</option>
<option value="Tengku">Tengku</option>
<option value="Tuanku">Tuanku</option>
<option value="Tun">Tun</option>
<option value="Tunku">Tunku</option>
<option value="Ungku">Ungku</option>
</select></br>
<label class="salute-label">*If a person has many salutations, choose the highest form of salutation*</label>
</p>
<div style="height:0"><label>First Name :</label><input type="text" name="spouse-fname" id="spouse-fname" required /></div>
<div style="float:right;"><label>Last Name :</label><input type="text" name="spouse-lname" id="spouse-lname" required /></div>
<div style="clear:both"> </div>
<div style="height:0"><label>House No. :</label><input type="text" name="spouse-houseno" id="spouse-houseno" required /></div>
<div style="float:right;"><label>Street Name :</label><input type="text" name="spouse-street" id="spouse-street" required /></div>
<div style="clear:both"> </div>
<div style="height:0"><label>Postcode :</label><input type="text" name="spouse-postcode" id="spouse-postcode" required /></div>
<div style="float:right;"><label>City :</label><input type="text" name="spouse-city" id="spouse-city" required /></div>
<div style="clear:both"> </div>
<div style="height:0">State :
<select name="spouse-state" id="spouse-state">
<option value="" disabled selected>Choose</option>
<option value="Johor">Johor</option>
<option value="Kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Melaka">Melaka</option>
<option value="Negeri Sembilan">Negeri Sembilan</option>
<option value="Pahang">Pahang</option>
<option value="Perak">Perak</option>
<option value="Perlis">Perlis</option>
<option value="Pulau Pinang">Pulau Pinang</option>
<option value="Sabah">Sabah</option>
<option value="Sarawak">Sarawak</option>
<option value="Selangor">Selangor</option>
<option value="Terengganu">Terengganu</option>
</select></div>
<div style="float:right"><label>Country</label><input type="text" name="spouse-country" id="spouse-country" required/></div>
</div>
END OF DIV ----->>>>>>>
<div style="clear:both"> </div>
<div style="height:0"><label>House No. :</label><input type="text" name="houseno" value="" required /></div>
<div style="float:right;"><label>Street Name :</label><input type="text" name="street" required /></div>
<div style="clear:both"> </div>
<div style="height:0"><label>Postcode :</label><input type="text" name="postcode" required /></div>
<div style="float:right;"><label>City :</label><input type="text" name="city" required /></div>
<div style="clear:both"> </div>
<div style="height:0">State :
<select name="state">
<option value="" disabled selected>Choose</option>
<option value="Johor">Johor</option>
<option value="Kedah">Kedah</option>
<option value="Kelantan">Kelantan</option>
<option value="Melaka">Melaka</option>
<option value="Negeri Sembilan">Negeri Sembilan</option>
<option value="Pahang">Pahang</option>
<option value="Perak">Perak</option>
<option value="Perlis">Perlis</option>
<option value="Pulau Pinang">Pulau Pinang</option>
<option value="Sabah">Sabah</option>
<option value="Sarawak">Sarawak</option>
<option value="Selangor">Selangor</option>
<option value="Terengganu">Terengganu</option>
</select></div>
<div style="float:right"><label>Country</label><input type="text" name="country" required/></div>
<div style="clear:both"> </div>
<div style="height:0"><label>Mobile No. :</label><input type="tel" name="tel" required/></div>
<div style="float:right;"><label>Office No. :</label><input type="tel" name="off" required/></div>
<div style="clear:both"> </div>
<div><label>Email Address :</label><input type="email" name="email" required/></div>
<input type="submit" name="submit" value="Submit" /><input type="submit" id="cancel" name="cancel" value="Cancel" />
</fieldset>
</form>
i know the coding is really long(sorry) but bear with me. if u noticed theres a NOTICE THIS LINE, BEGIN DIV and END DIV these divs i want to hide it first unless the radio button at NOTICE THIS LINE is clicked yes meaning that if clicked yes the input fields in the divs,as mention, will be shown.
i found this :
$(function(){
$("#spouse-yes, #spouse-no").change(function(){
$("#field1, #field2").val("").attr("readonly",true);
if($("#spouse-yes").is(":checked")){
$("#field1").removeAttr("readonly");
$("#field1").focus();
}
else if($("#spouse-no").is(":checked")){
$("#field2").removeAttr("readonly");
$("#field2").focus();
}
});
});
but it only enables/disables the input fields. i would like my div to be hidden first only then user can fill up the input fields.
