I have a form with multiple input values from various select drop down menus. For example:

A member has 3 choices:

Your favorite color: 1) red; 2 ) blue, 3) green.

If the favorite color selected is red, use a javascript show() to reveal a new div with drop down element, asking to select a new set of options (and so on for blue and green).

I am able to do this easily but the issue I run into however, is in the use of the additional form field names. For example, regardless of the selection above, every choice will prompt the user to enter information in a textarea explaining their choice. I want to name this text area: "explanation". If explanation is filled out by the member with choice 1 above, however, choice 3's hidden explanation field will overwrite the value, thus forcing me to create "explanation1", "explanation2", "explanation3"...

This is a simplified version of what I am trying to accomplish but ultimately, I do not want certain POST variables to go from page to page AT ALL within a hidden DIV. Is this possible?

Thanks!

EDIT

I found this article which gives a good explanation for disabling input elements, it does not however get to my underlying basis which is that I want to have multiple input elements with the same name but appear only for various selections (so explanation is only valid if choices are 1,2,3 and 2,4 but just because 2,4 is not met, 'explanatio开发者_JAVA技巧n' should not be set to disabled because of it)

How about setting the other fields (the hidden ones) to disabled? That way their values will not be posted along with the rest of your form.

So in the if-block where you decide which div-with-dropdown to show, just add:

$('#div1 .explanation, #div2 .explanation').attr('disabled', true);

Updated answer based on your comment. Just add a class to the answers, so they can have the same name. Make sure you don't give them the same ID, though. That's invalid HTML.

Man, it'll be very easy if you use Jquery, a JavaScript library. An example...

On a click, a input will appear...

$("#btn")click( function(){
    $("#inputID").css({'diplay':'block'});
});

You'll resolve your problems using Jquery.. access the site to learn more... http://www.jquery.com