jquery select, create input boxes?

Question

I have a dropdown selection box with the following:

<select name="type" id="speedB" style="width:324px;">
    <option value="">Please Select</option>
    <option value="9.99">1 = $9.99</option>
    <option value="19.99">5 = $19.99</option>
    <option value="39.99">10 = $39.99</option>                          
    <option value="199.99">All = $199.99</option>
</select>

Basically, what I want to do is:

If value 9.99 is chosen, display 1 input box for them to enter something in to.

If value 19.99 is chosen, display 5 input boxes for them to enter something in to.

If value 39.99 is chosen, display 10 input boxes for them to enter something in to.

If value 199.99 is chosen, display ONE input box with the name="state" for them to enter something in to.

I want the newly created input boxes to have a name such as name="pc1" name="pc2" etc.. unless value 199.99 is chosen, I only want one input box to be shown with the name="state"

How would I go about doing this?

So far all I have is the html for the select box, I have been playing around with jquery select/onclick/change but I haven't got anywhere. Thank you :) — Latox
– Latox, Commented Aug 25, 2011 at 2:42
For this sort of thing I mostly tend to take a slightly different approach: I'd include all of the inputs but hide/show them depending on the selected option. That way if the user repeatedly changes their selection you don't have to worry about testing whether the inputs have already been created, deleting them, or whatever. — nnnnnn
– nnnnnn, Commented Aug 25, 2011 at 2:48

ShankarSangoli · Accepted Answer · 2011-08-25 03:11:04Z

2

Add a container for the input boxes on the page with say id "inputboxes" and try this.

Working demo

$(function(){
    $("#speedB").change(function(){
        var $inputboxes = $("#inputboxes").html(''), inpCount = 0;
        if(this.value == "9.99"){
            inpCount = 1;
        }
        else if(this.value == "19.99"){
            inpCount = 5;
        }
        else if(this.value == "39.99"){
            inpCount = 10;
        }
        else if(this.value == "199.99"){
            inpCount = "ALL";
        }
       for(var i = 0;i<inpCount;i++){
           $inputboxes.append("<input type='text' name='pc"+(i+1)+"' /><br />");
       }
        if(inpCount == "ALL"){
            $inputboxes.append("State: <input type='text' name='pc1' />");
        }
    }); 
});

edited Aug 25, 2011 at 3:11

answered Aug 25, 2011 at 2:51

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

griegs Over a year ago

And what if the prices change? What if you add more options? What if you now want to generate the options in code behind?

ShankarSangoli Over a year ago

There will be many such questions @grieg. What if the select id changes? If you think all these things can change then you have to implement it accordingly. This gave a enough help to OP of how it can be implement. I am sure this code is not going to be copy pasted in the application.

griegs · Accepted Answer · 2011-08-25 02:45:34Z

0

i would place 2 classes against each textbox

<option class="price1" value="9.99">1 = $9.99</option>

then on click of the options i'd hide all input boxes with prices as a class and show all input boxes with priceX in their class.

<input type=text class="price1 prices"/>
<input type=text class="price2 prices"/>

$(".list").click(function(){
  $(".prices").hide();
  $("input." & $(this).class()).show();
});

the above is untested in terms of getting the class of the clicked item but the rest should work.

edit

i found this in terms of getting the selected options class name

$('#' + $('option:selected', this).attr('class')).show();

answered Aug 25, 2011 at 2:45

griegs

22.8k33 gold badges132 silver badges207 bronze badges

Comments

Adam Magaluk · Accepted Answer · 2011-08-25 02:50:58Z

0

Example Below,

http://jsfiddle.net/L7enV/7/

answered Aug 25, 2011 at 2:50

Adam Magaluk

1,72620 silver badges30 bronze badges

1 Comment

ShankarSangoli Over a year ago

This example do not give name to the input fields as OP wants and also it do not show State label when the last option is selected.

Milimetric · Accepted Answer · 2011-08-25 02:52:36Z

I wouldn't do this with a drop-down. Try an accordion:

http://jqueryui.com/demos/accordion/

Here's a fiddle as a beginning for what you're saying:

http://jsfiddle.net/7KwA9/6/

And here is the code from that fiddle:

<div id="accordion">
    <h3><a href="#">1 = $9.991</a></h3>
    <div>
        <form>
            <input type="hidden" name="type" value="9.99"/>
            <label>pc1 <input type="text" name="pc1" /></label>
        </form>
    </div>
    <h3><a href="#">5 = $19.99</a></h3>
    <div>
        <form>
            <input type="hidden" name="type" value="19.99"/>
            <label>pc1 <input type="text" name="pc1" /></label><br/>
            <label>pc2 <input type="text" name="pc2" /></label><br/>
            <label>pc3 <input type="text" name="pc3" /></label><br/>
            <label>pc4 <input type="text" name="pc4" /></label><br/>
            <label>pc5 <input type="text" name="pc5" /></label><br/>
        </form>
    </div>
    <h3><a href="#">10 = $39.99</a></h3>
    <div>
        etc...
    </div>
    <h3><a href="#">All = $199.99</a></h3>
    <div>
        etc...
    </div>
</div>

With javascript like this:

$(function() {
    $( "#accordion" ).accordion();
});

Collectives™ on Stack Overflow

jquery select, create input boxes?

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest