Member Avatar for <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.

  • 3 Contributors
  • 9 Replies
  • 284 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Good starting point from and a solid quick fix from — the switch approach does work for a small number of options. For a maintainable form that behaves correctly across browsers and is accessible, prefer these improvements: make IDs unique (the original markup had like_blue_why twice and two “blue” labels), use the select’s change event (not focus), and hide/show fields in a way that also updates semantics and validation state.

Two scalable patterns that avoid a long switch:

  • Single dynamic field: keep one label + input and replace the question text, input name/required state, and shown/hidden state based on the selected value. This is compact and easy to validate server-side.
  • Prebuilt fields: give each follow‑up field a shared class and a data key (e.g., data-color="red"). On change, add/remove a hidden class to the matching element and clear/disable the others.

Example (single-field mapping, vanilla JS):

/* map values to question text */
const questions = { red: 'Why do you like red?', blue: 'Why do you like blue?', green: 'Why do you like green?' };

select.addEventListener('change', e => {
  const q = questions[e.target.value] || '';
  questionLabel.textContent = q;
  questionInput.required = !!q;
  container.classList.toggle('hidden', !q);
});

Accessibility and server-side notes: when hiding inputs, set aria-hidden="true" and disabled=true (or remove required) so hidden fields neither fail client validation nor submit unwanted values. Ensure each input has a meaningful name for server processing or consistently reuse one name if using the single-field pattern. Finally, include a default empty option so nothing appears until a selection is made, and validate on the server as the ultimate source of truth.

Recommended Answers

All 9 Replies

Member Avatar for 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.

Member Avatar for <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.

Member Avatar for Member #949455

@<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.

Edited by Member #949455 because: grammer
Member Avatar for <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?

Member Avatar for Member #949455

@<MICHAEL>

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

Read this and try out the example:

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.

Member Avatar for 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/

commented: Awesome!!!! +6
Member Avatar for <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.

Member Avatar for 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/

commented: ThAnKs!.!.!.! +0
Member Avatar for <M/>

Thanks JorgeM, the solution worked!

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.