When option in select field is chosen, make input appear

[thecommonthread]

This is pretty simple but I need a script that when an option is selected in a drop-down box (select tag) an input tag appears and I am still pretty basic at javascript.

I was using a script that worked fine but because the variable of the option that makes the script go required the "|" character, it interfered with a PHP script in my document and screwed everything up. Lame. Any help would be so much appreciated.

Chris

[Philip M]

You do not make it clear whether you want the input box to appear if any option is selected or only if one particular option is selected. If you want the former remove the lines in blue.

<select id = "fruits" onchange = "makeBox()">
<option value = "0" selected>Select a fruit&nbsp&nbsp </option>
<option value = "1"> Apple<br>
<option value = "2"> Pear<br>
<option value = "3"> Peach<br>
<option value = "4"> Plum<br>
<option value = "5"> Strawberry<br>
<option value = "6"> Banana<br>
</select>
<br><br>

<div id = "inputBox"></div>

<script type = "text/javascript">
function makeBox() {
var a = "<input type = 'text' name = 'box1' id = 'box1'>"
if (document.getElementById("fruits").value==1) {
document.getElementById("inputBox").innerHTML = a;
}
}
</script>

"There is hardly anything in the world that some man cannot make a little worse and sell a little cheaper, and the people who consider price only are this man's lawful prey." John Ruskin

[thecommonthread]

Thanks so much. The answer to your question is YES only appear when a single option is chosen. So therefore the only problem with that script above is that the input box doesn't disappear when you select a different option after you've chosen the option that makes the input box appear.

[Philip M]

Surely you could have worked out how to deal with that?

<script type = "text/javascript">
function makeBox() {
var a = "<input type = 'text' name = 'box1' id = 'box1'>"
if (document.getElementById("fruits").value==1) {
document.getElementById("inputBox").innerHTML = a;
}
else {
document.getElementById("inputBox").innerHTML = "";
}
}
</script>

[Sabu]

Philip can you help me with this:

I have an option form and for every option i want to create multi inputs (checkbox).

I used your code, it works, but i can only add 1 input. How can i add more inputs for the selected option?

Thank you!

This is what i did
<select id = "lucrari" onchange = "makeBox()">
<optgroup label="Bucatarie">
<option value="masinaspalatvase" > Masina de spalat vase
</option>
<option value="plita">Plita</option>

</optgroup>
<optgroup label="Spatii publice">
<option value="grupsanitar">Grup Sanitar</option>
<option value="Sala mese">Sala mese</option>
</optgroup>
</select>
<br><br>

<div id = "inputBox"></div>
<script type = "text/javascript">
function makeBox() {
var a = "<input type = 'checkbox' name = 'box1' id = 'box1'>A fost reglata concentratia de detergent"
if (document.getElementById("lucrari").value=="masinaspalatvase" ) {
document.getElementById("inputBox").innerHTML = a;
}
else {
document.getElementById("inputBox").innerHTML = "";
}
}
</script>

Originally Posted by Philip M

Surely you could have worked out how to deal with that?

<script type = "text/javascript">
function makeBox() {
var a = "<input type = 'text' name = 'box1' id = 'box1'>"
if (document.getElementById("fruits").value==1) {
document.getElementById("inputBox").innerHTML = a;
}
else {
document.getElementById("inputBox").innerHTML = "";
}
}
</script>

[jmrker]

Are you trying to do something like this?
See: http://www.javascriptsource.com/form...down-list.html

Changing from text input to checkboxes is super easy.

[Sabu]

yes, something like when selecting "Plane".

Do you think if i can implement an "add to cart" ?

What i want to do:
- have 10-12 options, for every option 10-20 inputs.
- when i select the certain inputs for an option i want to add to cart so in the end when i select several options i'll have a list with options and inputs.

I need this for a service plan.

Thank you for your reply!

[Old Pedant]

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#features div { display: none; }
</style>
</head>
<body>
<form id="theForm">
    <select name="locations">
        <option value="">--choose one--</option>
        <optgroup label="kitchen">
            <option value="dishwasher"> Dishwasher </option>
            <option value="grill"> Grill </option>
        </optgroup>
        <optgroup label="Public spaces">
           <option value="bathroom"> Bathroom </option>
           <option value="diningroom"> Dining Room</option>
        </optgroup>
    </select>
<div id="features">
    <div id="dishwasher">
        Dishwasher features:
        <label><input type="checkbox" name="dishwasherSpeeds" value="2"> 2 speeds </label>
        <label><input type="checkbox" name="dishwasherDry" value="heated"> Heated drying </label>
        <label><input type="checkbox" name="dishwasherPrerinse" value="pre"> Pre-rinse </label>
    </div>
    <div id="grill">
        Grill features:
        <label><input type="checkbox" name="grillBurners" value="2"> 2 burners </label>
        <label><input type="checkbox" name="grillFan" value="yes"> Has fan </label>
    </div>
    <div id="bathroom">
        Bathroom features:
        <label><input type="checkbox" name="bathroomSinks" value="2"> 2 sinks </label>
        <label><input type="checkbox" name="bathroomBidet" value="yes"> Bidet </label>
    </div>
    <div id="diningroom">
        Dining Room features:
        <label><input type="checkbox" name="diningroomChandelier" value="yes"> Chandelier </label>
    </div>
</div>
</form>
<script type="text/javascript">
var form = document.getElementById("theForm");
form.locations.onchange = locationChange;

function locationChange( )
{
    var choice = this.value;
    var divs = document.getElementById("features").getElementsByTagName("div");
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        // OPTIONAL:  Clear all checkboxes when a different location is chosen
        var inps = div.getElementsByTagName("input");
        for ( var i = 0; i < inps.length; ++i )
        {
            inps[i].checked = false;
        }
        // END OF OPTIONAL
        div.style.display = ( div.id == choice ) ? "block" : "none";
    }
}
</script>
</body>
</html>

Try that demo.

What is the right translation of "lucrari"? Bing says "artworks" but somehow I don't think that is right. I think the rest are right.

[Old Pedant]

Originally Posted by jmrker

Are you trying to do something like this?
See: http://www.javascriptsource.com/form...down-list.html

Changing from text input to checkboxes is super easy.

That works, but it is clumsy code, depending on the option number to choose which to display. And then, on top of that, needing a separate IF for each option. Ugh.

[Old Pedant]

And given the stated use of this, I think you want to OMIT the part I marked as OPTIONAL.

[Sabu]

lucrari is maintenance.

What you gave me is exactly what i was looking for.

But i have the same question as i said above: Do you think it's possible to implement an add to cart button for every option?

Thank you for the replies!

[Old Pedant]

Sure. But given the style of the page, I would use an "Add this to cart" *CHECKBOX*.

The problem with a button is the user expects to see something change RIGHT NOW.

Since you are allowing them to pick and choose MULTIPLE options and multiple checkboxes, I would think just adding another checkbox would be the way to do it.

What about if, then they show an item from the <select>, an *ALREADY-CHECKED* checkbox shows up in those individual <div>s? In other words, "You chose BATHROOM from the <select> so we *assume* you want to purchase that service." The user could still change his/her mind by UN-checking that checkbox.

Hmmm???

[Sabu]

Yes, it's a good idea.

Can you help me with an example of that code?

[Old Pedant]

Like this:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div#features div { display: none; }
</style>
</head>
<body>
<form id="theForm">
    <select name="locations">
        <option value="">--choose one--</option>
        <optgroup label="kitchen">
            <option value="dishwasher"> Dishwasher </option>
            <option value="grill"> Grill </option>
        </optgroup>
        <optgroup label="Public spaces">
           <option value="bathroom"> Bathroom </option>
           <option value="diningroom"> Dining Room</option>
        </optgroup>
    </select>
<div id="features">
    <div id="dishwasher">
        <label><input type="checkbox" name="addToCart" value="dishwasher"/>
            Add dishwasher maintenance </label><br/>
        Dishwasher features:
        <label><input type="checkbox" name="dishwasherSpeeds" value="2"> 2 speeds </label>
        <label><input type="checkbox" name="dishwasherDry" value="heated"> Heated drying </label>
        <label><input type="checkbox" name="dishwasherPrerinse" value="pre"> Pre-rinse </label>
    </div>
    <div id="grill">
        <label><input type="checkbox" name="addToCart" value="grill"/>
            Add grill maintenance </label><br/>
        Grill features:
        <label><input type="checkbox" name="grillBurners" value="2"> 2 burners </label>
        <label><input type="checkbox" name="grillFan" value="yes"> Has fan </label>
    </div>
    <div id="bathroom">
        <label><input type="checkbox" name="addToCart" value="bathroom"/>
            Add bathroom maintenance </label><br/>
        Bathroom features:
        <label><input type="checkbox" name="bathroomSinks" value="2"> 2 sinks </label>
        <label><input type="checkbox" name="bathroomBidet" value="yes"> Bidet </label>
    </div>
    <div id="diningroom">
        <label><input type="checkbox" name="addToCart" value="diningroom"/>
            Add dining room maintenance </label><br/>
        Dining Room features:
        <label><input type="checkbox" name="diningroomChandelier" value="yes"> Chandelier </label>
    </div>
</div>
</form>
<script type="text/javascript">
var form = document.getElementById("theForm");
form.locations.onchange = locationChange;

function locationChange( )
{
    var choice = this.value;
    var divs = document.getElementById("features").getElementsByTagName("div");
    for ( var d = 0; d < divs.length; ++d )
    {
        var div = divs[d];
        div.style.display = "none";
    }
    // now process the chosen div:
    div = document.getElementById(choice);
    div.style.display = "block";
    div.getElementsByTagName("input")[0].checked = true;
}
</script>
</body>
</html>

[Sabu]

Yes, something like that.

But how will they look when i group them in a shopping list, bag, etc?