CODEWITHSUNDEEP
jquery
Latox
Latox

Reputation: 4695

jquery select, create input boxes?

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?

Upvotes: 1

Views: 1479

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69905

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' />");
        }
    }); 
});

Upvotes: 2

Milimetric
Milimetric

Reputation: 13549

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();
});

Upvotes: 0

Adam Magaluk
Adam Magaluk

Reputation: 1726

Example Below,

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

Upvotes: 0

griegs
griegs

Reputation: 22760

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();

Upvotes: 0

Related Questions