How to expand form based on selection of input

[<M/>]

I have a form and it is pretty simple. What i want to do is allow the user to fill out the form and select a color and depending on the different color that is selected, a question will reveal varying on its selection.

So here is my HTML:

<form>
<div class="row"><label>Name</label><input type="text" id="name"></div>
<div class="row"><select name="reason" type="select" id="reason">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
</select></div>
<div id="more">

<div class="row"><label>Why Do you like red</label><input type="text" id="like_red_why"></div>

<div class="row"><label>Why Do you like blue</label><input type="text" id="like_blue_why"></div>

<div class="row"><label>Why Do you like blue</label><input type="text" id="like_blue_why"></div>

</div>

<div ></div>
<div class="row"><label>&nbsp;</label><input type="submit" value="Submit"></div>
</form>

This is my jQuery:

<script>
$(function() {
    $('#more').hide();
    $('#reason').focus(function() {
        $('#more').slideDown();
    });
});
</script>

How do i get it so that depending on the selection, a different question will show up.

Thanks.

[JorgeM]

Have you considered using the javascript switch statment? I prefer it when having more than one case to match. For the case that is a match, display the text.

You could probably assign each color a number and store the questions in an array so retreival will be easier.

[<M/>]

How would I use the javascript switch statement, just curious to know how that is done.

But how would i assign each color a number and store the questions in an array? All i have is different categories that appear the same time because i can't seperate them.

BTW, Thanks for your quick response.

@<MICHAEL>

How would I use the javascript switch statement, just curious to know how that is done.

You have 2 options either it's Javascript which JorgeM mention or you can used PHP & MYSQL to do that.

There is a 3rd option which is ASP.NET which you need to ask JorgeM too because I'm not familiar with that.

[<M/>]

what would the php and mysql method look like? how would that be set up, it may be easier for me. unless jQuery is easier?

I am not going to use the ASP.NET method because I don't have knowledge of it yet and I am going to learn after I master php, mysql, and java.

Do you have resources that i can follow using the PHP and MySQL method?

@<MICHAEL>

Do you have resources that i can follow using the PHP and MySQL method?

Read this and try out the example:

http://brian.dobberteen.com/code/using-php-and-mysql-to-create-a-simple-contact-form-and-results-browser/

and this too:

http://www.html-form-guide.com/php-form/php-form-processing.html

Both examples has a form and a dropdown menu and also how to create db and query.

[JorgeM]

Hello Micheal,

Take a look at this simple example using the javascript switch statement. Its definately not a full solution.

http://jsfiddle.net/g9Zym/

[<M/>]

Thank you guys!

JorgeM, your solutions works! But a quick question. When one selects on an input, how do you get the others to vanish because the example shows the questions appear properly for the right color but the old questions still remain. Do you see what I mean, i think the way i worded it may sound a little strange?

JorgeM, in the mean time i will play around with it... i will see what i can get.

[JorgeM]

I do understand your question and that is definately what I meant by not a full solution. If you continued down this path, you would have to hide() the other questions in each case. For example..

case "red":
  $('#divRed').show();
  $('#divBlue').hide();
  $('#divGreen').hide();
  break;

However, as you can imagine, this is not a scalable solution after a few colors.

I think a an alternate approach may be to have one label and one input, and just change the text depending on the color that is chosen.

For example...

case "red":
  $('#lblQuestion').html("Why do you like Red?");
  break;

Here is another demo. I think this is much more scalable.

http://jsfiddle.net/36pkE/1/

[<M/>]

Thanks JorgeM, the solution worked!