http://www.fastaff.com/short-form/

If you click on one option, it then changes the other stuff you can click on for the form depending on the option you clicked above.

I have to recreate that form but have no idea how they did that...

little help?

Some of the form elements are hidden using style="display: none;" on a container element, and revealed using some simple javascript which reset the display attribute. Using jQuery, it can look something like this

$("#some_radio_button").click(function(){
   $("#some_hidden_container").show();
});
$("#some_other_radio_button").click(function(){
   $("#some_hidden_container").hide();
});

jQuery already have built in functions for this effect called show() and hide() I believe.

hmm... that's a good idea, just toggle certain divs to SHOW and HIDE depending on the radio button.

Do you happen to have an example though?? I'm not an expert of javascript syntax and how to call in the jquery.

First off, I can highly recommend jQuery if you're new to javascript. It makes a lot of things a whole lot simpler (the code in my last post is almost all you need). Secondly, there are great tutorials on the jQuery website. I.e. check out the "Getting started" section here. And there's also a tutorial on show/hide.

So, I can get close to getting what I want done, but the issue is, that when I use these radio buttons, you can only get ONE of the selected boxes to appear when you click it.


For example, you click "yes" it then shows the next set of questions, where you check no in this box, but that first "yes" disappears and it doesn't show the other new "show / hide" set.

Sorry, but this is by far the most confusing thing I've done. I have used other people's examples, but it doesn't seem to work for MULTIPLE hide / show divs. Only a set of two.

Oh, meant to say thanks for the reply somewhere in there!

You can of course bind seperate onclick handlers to different elements, and have them do whatever you want. Here's a small example. Lets say you have this form.

<form ...>
    <div id="container1">
        <p>Can you say yes?</p>
        <input id="q1_yes" type="radio" name="question1" value="yes"> Yes<br />
        <input id="q1_no" type="radio" name="question1" value="no"> No<br />
    </div>
    <div id="container2" style="display: none;">
        <p>Can you say it again?</p>
        <input id="q2_yes" type="radio" name="question2" value="yes"> Yes<br />
        <input id="q2_no" type="radio" name="question2" value="no"> No<br />
    </div>
    <div id="container3" style="display: none;">
        <p>Now wasn't that fun?</p>
         <input id="q3_yes" type="radio" name="question2" value="yes"> Yes<br />
         <input id="q3_no" type="radio" name="question2" value="no"> No<br />
     </div>
</form>

It has tree questions, with the second and third being hidden. Now let's add this JS code.

$(document).ready(function(){
    $("#q1_yes").click(function(){
        $("#container2").show();
    });
    $("#q1_no").click(function(){
        $("#container2").hide();
    });

    $("#q2_yes").click(function(){
        $("#container3").show();
    });
    $("#q2_no").click(function(){
        $("#container3").hide();
    });

    $("#q3_yes").click(function(){
        alert("Yay, you answered Yes three times!");
    });
});

Now, if you click Yes or No in question 1, it will show or hide container2. If you click Yes/No in question 2 it will show/hide container 3. And if you click yes in question 3 it will show an alert popup.

kinda figured this out... still very confusing. Thanks so much for your help though, you're a saint.

I am finding out that javascript is not my forte... php I can dabble around quite a bit, and CSS and HTML are fine, but these IF THEN statements really throw me for a loop instantly.

So, Here's the thing now... I need to have it so that the items in the form are required prior to submission. This would normally be fine - and I have been able to do this for the top part of the form for email and name fields, but it's very tricky since with this "conditional" parts of the form are all one form... Some things are just hidden and some are shown – all from the same form, so if you click "no" to the registered nurse question, and wanted to submit - it would make you want to fill out the other parts of the form since they are not answered. Blah. It's a mess and really exhausting me. I hate dealing with manually made forms.

Can some kind soul here please help me out??


http://bayardclient.com/fastaff/shor...orm_layout.php

Here is a good jquery plugin for form validation:
http://bassistance.de/jquery-plugins...in-validation/
http://docs.jquery.com/Plugins/Validation
There are plenty of demos to follow from on there.

Plus, you can follow the validation example here for a show/hide
(if you uncheck the billing address you'll see the additional required fields)
http://jquery.bassistance.de/validat...keto/step2.htm

Looks like when the options are set the code is set to display certain containers. All the additional containers are set to display:none as a default.

if($('input:radio[name=options1]:checked').val() == 'yes') {
$('#options2').css({'display' : 'block'});
};

Hope this helps.
-Nolan Campbell
Nuvuthemes