Topic awaiting preservation: Radio Onclick to reveal 2nd part of form (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8975" title="Pages that link to Topic awaiting preservation: Radio Onclick to reveal 2nd part of form (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Radio Onclick to reveal 2nd part of form <span class="small">(Page 1 of 1)</span>\$

Cadkins23 Obsessive-Compulsive (I) Inmate From: Waterbury, CT, USA Insane since: Dec 2003	posted 12-24-2003 11:49 My question should be easy to ask, and I hope it's as easy to answer. I have a rather large form asking questions like sex, age, weight, height, name, username, email, etc. The first question on the form is if it is a single person or a couple, if they select the 'couple' radio button I want the form to pretty much be duplicated in appearance but of course it will actually be one form because all values will be stored in the mysql database. So basically I can create 1 form for if they're single, and make the form twice as big if they're a couple because then there are two people that need to answer height and weight questions and I know I need to have different names such as name1 and name2, etc. That isn't the problem. If someone could please help me out here I'm very new to using javascript, I am begining to feel comfortable using PHP but would love to get some help with the Javascript problem. I am aiming to have the single form take up the first 50% of the table on the left and then if they select 'couple' the same type of questions are being asked in a different column to the right of that one taking up the other 50% of the table. If I wasn't being clear enough please let me know as I will try to clarify things. By the way this website looks incredible. -Chris [This message has been edited by Cadkins23 (edited 12-24-2003).]
kuckus Bipolar (III) Inmate From: Berlin (almost) Insane since: Dec 2001	posted 12-24-2003 12:29 Hi there Chris I think the easiest solution would be: 1. Enclose the 2nd part of the form (i.e. the contents of the right table cell) with a <div> so JavaScript can change its "display" CSS property through its ID, e.g. <td>     <div id="coupleForm" style="display: none;">         ...     </div> </td> 2. Add JS functions for showing/hiding the right part to the documents <head>: <script type="text/javascript">     function showCoupleForm() {         document.getElementById("coupleForm").style.display = "block";     }     function hideCoupleForm() {         document.getElementById("coupleForm").style.display = "none";     } </script> 3. Call these functions when the radio buttons are clicked, e.g. <input type="radio" onclick="showCoupleForm();" ... /> Hope this helps you getting started kuckus
HZR Bipolar (III) Inmate From: Cold Sweden Insane since: Jul 2002	posted 12-24-2003 13:15 I suggest hiding it with JavaScript initially, for people who have CSS but not JavaScript enabled. Otherwise they will miss that part.

Topic awaiting preservation: Radio Onclick to reveal 2nd part of form (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=8975" title="Pages that link to Topic awaiting preservation: Radio Onclick to reveal 2nd part of form (Page 1 of 1)" rel="nofollow" >Topic awaiting preservation: Radio Onclick to reveal 2nd part of form <span class="small">(Page 1 of 1)</span>\$

Cadkins23
Obsessive-Compulsive (I) Inmate

From: Waterbury, CT, USA
Insane since: Dec 2003

posted 12-24-2003 11:49

My question should be easy to ask, and I hope it's as easy to answer.
I have a rather large form asking questions like sex, age, weight, height, name, username, email, etc.
The first question on the form is if it is a single person or a couple, if they select the 'couple' radio button I want the form to pretty much be duplicated in appearance but of course it will actually be one form because all values will be stored in the mysql database.

So basically I can create 1 form for if they're single, and make the form twice as big if they're a couple because then there are two people that need to answer height and weight questions and I know I need to have different names such as name1 and name2, etc. That isn't the problem. If someone could please help me out here I'm very new to using javascript, I am begining to feel comfortable using PHP but would love to get some help with the Javascript problem.

I am aiming to have the single form take up the first 50% of the table on the left and then if they select 'couple' the same type of questions are being asked in a different column to the right of that one taking up the other 50% of the table.

If I wasn't being clear enough please let me know as I will try to clarify things.

By the way this website looks incredible.

-Chris

[This message has been edited by Cadkins23 (edited 12-24-2003).]

kuckus
Bipolar (III) Inmate

From: Berlin (almost)
Insane since: Dec 2001

posted 12-24-2003 12:29

Hi there Chris

I think the easiest solution would be:

1. Enclose the 2nd part of the form (i.e. the contents of the right table cell) with a <div> so JavaScript can change its "display" CSS property through its ID, e.g.

<td>
    <div id="coupleForm" style="display: none;">
        ...
    </div>
</td>

2. Add JS functions for showing/hiding the right part to the documents <head>:

<script type="text/javascript">

    function showCoupleForm() {
        document.getElementById("coupleForm").style.display = "block";
    }

    function hideCoupleForm() {
        document.getElementById("coupleForm").style.display = "none";
    }

</script>

3. Call these functions when the radio buttons are clicked, e.g.

<input type="radio" onclick="showCoupleForm();" ... />

Hope this helps you getting started

kuckus

HZR
Bipolar (III) Inmate

From: Cold Sweden
Insane since: Jul 2002

posted 12-24-2003 13:15

I suggest hiding it with JavaScript initially, for people who have CSS but not JavaScript enabled. Otherwise they will miss that part.