Drop Down Menu - Input Boxes

[TheMightyEddy]

Hello everyone, how would I make something like if a user picks a different option from the drop down menu, each input box will be different. Example:

<option value="" selected="Select A Car"></option>
                        <option value="audi">Audi</option>
      <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required">

BUT if for example the user DOES NOT pick "Audi" and they pick BMW, the input will be like this:

<option value="bmw">BMW</option>
      <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required">

So each option will show a different input box. How do I do this?

[DrDOS]

That looks like a job for javascript. PhP can build all the inputs and dropdowns, javascript would have no problem placing the dropdown choices in the inputs. Javascript could read all the choices from many types of inputs, building an array of them, putting the array in a hidden input, and letting the array be posted to PhP, where the whole array could be used by PhP.

[Keleth]

Bare in mind, you can't have option/inputs together like that. Options are children of select boxes, so you have to wrap those options within selects, with the inputs outside.

But yah, if you want dynamic action, you need Javascript. Remember that PHP is server side. When a user requests a page, PHP processes it and does w/e and sends that information back to the client. It then has no further interaction until the next request. Thus, changing the page ad infinitum would make no difference to the PHP. Javascript on the other hand works on the client side... it makes dynamic changes to the client's view, without ever needing to interact with the server.

[Philip M]

This is an example only of how you would go about this:-

<select id = "mysel" onchange = "showbox()">
<option value = "">Chose a car ...</option>
<option value = "Audi">Audi</option>
<option value = "BMW">BMW</option>
</select>
<br><br>

<span id = "span1" style="display:none">Audi <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required"></span>
<span id = "span2" style="display:none">BMW <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required"></span>


<script type="text/javascript">
function showbox() {
document.getElementById("span1").style.display="none";
document.getElementById("span2").style.display="none";

var val = document.getElementById("mysel").value;
if (val == "Audi") {
document.getElementById("span1").style.display="block";
}
if (val == "BMW") {
document.getElementById("span2").style.display="block";
}

}

</script>

If there are many options the code can be simplified.


"If you think education is expensive, try ignorance." - Derek Bok (1930-), Harvard University President

[TheMightyEddy]

Originally Posted by Philip M

This is an example only of how you would go about this:-

<select id = "mysel" onchange = "showbox()">
<option value = "">Chose a car ...</option>
<option value = "Audi">Audi</option>
<option value = "BMW">BMW</option>
</select>
<br><br>

<span id = "span1" style="display:none">Audi <input name="audi" type="text" id="audi" size="30" placeholder="Audi R8" class="required"></span>
<span id = "span2" style="display:none">BMW <input name="bmw" type="text" id="bmw" size="30" placeholder="BMW M5" class="required"></span>


<script type="text/javascript">
function showbox() {
document.getElementById("span1").style.display="none";
document.getElementById("span2").style.display="none";

var val = document.getElementById("mysel").value;
if (val == "Audi") {
document.getElementById("span1").style.display="block";
}
if (val == "BMW") {
document.getElementById("span2").style.display="block";
}

}

</script>

If there are many options the code can be simplified.


"If you think education is expensive, try ignorance." - Derek Bok (1930-), Harvard University President

Okay mind showing me the many options code? So what if I have Audi, BMW, Mercedes, Toyota, Honda, Ferrari?

[Philip M]

Originally Posted by TheMightyEddy

Okay mind showing me the many options code? So what if I have Audi, BMW, Mercedes, Toyota, Honda, Ferrari?

Surely you can manage that yourself? Six options is not what I would call "many". Simply add the additional options to the select list, add additional spans containing the textboxes, and in the script change the display of the span to block if the value of the select is "Toyota" or wahtever.

[TheMightyEddy]

Originally Posted by Philip M

Surely you can manage that yourself? Six options is not what I would call "many". Simply add the additional options to the select list, add additional spans containing the textboxes, and in the script change the display of the span to block if the value of the select is "Toyota" or wahtever.

I know I'm just saying. If I had 50 car brands, how would the layout be? Can you just like number them or something simple?

[TheMightyEddy]

Actually, nevermind, I got it. Also, how would I create a button that would save their inputted info into a MySQL database table called "audi" for the audi field?

[Philip M]

If you had 50 car brands there are several ways in which the code could be materially shortened/simplified. But I don't have the time to write code speculatively. One common outcome is that the OP says "Oh, but I have now thought of something else that I want".

I don't really understand your question about a button. If you are working with MySQL ask in the appropriate forum. But your questions suggest to me that you are trying to run before you can walk, and attempting something beyond your current coding capabilities. As this would seem to be a commercial application my advice would be the same as if my car was giving trouble - pay a professional to fix it.