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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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.

Recommended Answers

All 2 Replies

JQuery has .hide() and .show() methods you can use to hide and show content.

If you want the digs to be hidden when the page loads, use CSS and set their display: none. Then use the .show() method to unhindered the div(s).

ah.. right. totally forgot about that. shows how much my js knowledge sucks. thanks jorgeM!

sidenote: im using overlay as well

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.