Adding several input boxes based by a select box value

Question

I have a select box:

<select id="steps_number">
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>

Now, if the user selects "4", then 4 input boxes needed to be added to the page, if he changes his selection to 8, 8 input boxes need to be there, an so on...

And also, the input boxes names are important, I'm gonna send the form values to another page for processing and inserting the data into db, how I could know/get the newly made input boxes names?

Nothing actually, I have no idea how jQuery/Javascript works :( — behz4d
– behz4d, Commented Apr 13, 2012 at 12:44
@behz4d: Time to read a book I'd say, this is no wonder-machine you put in your requirements and get the code back. Do your homework. — hakre
– hakre, Commented Apr 13, 2012 at 12:49
@behz4d start reading JavaScript guide then read How does jQuery work — Manse
– Manse, Commented Apr 13, 2012 at 12:52

Brad Christie · Accepted Answer · 2012-04-13 12:49:22Z

3

Very simple example (also demonstrated here):

// bind to when the drop-down list changes
$('#steps_number').change(function(){    
    // find out the number to display
    var count = $(this).val();

    // Try to keep the fields already on the page. Remove anything
    // that exceeds the count
    $('#steps input:gt('+(count-1)+')').remove();

    // But if it doesn't have enough, add more
    for (var i = $('#steps input').length; i < count; i++){
        $('<input>',{type:'text',id:'step'+(i+1),name='step'+(i+1)}).appendTo('#steps');
    }
});

This assumes you want the following structure for your inputs:

<div id="steps">
  <input type="text" id="step1" name="step1" />
  <input type="text" id="step2" name="step2" />
  <input type="text" id="step3" name="step3" />
  <!-- .... -->
</div>

And with regards to server-side, you'll now see the inputs using $_REQUEST['step1'], $_REQUEST['step2'], etc. Or, depending on your form method, they'll show up in $_POST or $_GET as well.

answered Apr 13, 2012 at 12:49

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

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

1 Comment

Brad Christie Over a year ago

@behz4d: No problem. I've tried to comment the code to give you an explanation, but if you have any questions post a comment to this answer and I'll do my best to review it.

antyrat · Accepted Answer · 2012-04-13 12:49:36Z

0

I wrote for you some basic functionality. But you need to extend it for your needs:

$('#steps_number').change(function(){
    for(var i=0; i < parseInt($(this).val()); i++) {
        $('body').append('<input type="text" name="someinput' + i + '">');
    }
});

See on jsFiddle

answered Apr 13, 2012 at 12:49

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

1 Comment

Brad Christie Over a year ago

1. Given the webmaster is supplying the values of the <select> is parseInt necessary? 2. You're going to keep adding more and more controls to the page. I'd recommend either a wrapper you can reset and re-populate, or a check for previous elements.

PruitIgoe · Accepted Answer · 2012-04-13 12:53:37Z

You could do something like this:

<html>
<head>
    <title>Test</title>

    <script language="javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script language="javascript">

        $(document).ready(function(){

            alert("ok");
            $("#steps_number").change(function() { 
                var inputNum = $("#steps_number").val();

                var inputCode = "";
                for(i=0; i<inputNum; i++) { 
                    inputCode += "<p class=\"inputBox\"><input id=\"inputBox_" + i + "\" size=\"20\" type=\"text\"></p>"
                }

                $("#inputBoxes").html(inputCode);
            });
        });
    </script>
</head>

<body>

    <form id="testform">
        <select id="steps_number">
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select>

        <div id="inputBoxes">

        </div>
    </form>
</body>
</html>

Jonny Burger · Accepted Answer · 2012-04-13 12:59:26Z

0

Here is my solution:

<select id="steps_number">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$("#steps_number").on("change", function() {
    var count = $(this).val()
    $("#container").html("")
    for (i=0;i<count;i++) {
        $("<input>").appendTo("#container");
        $("<br>").appendTo("#container")
    }
})

</script>

answered Apr 13, 2012 at 12:59

Jonny Burger

9114 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding several input boxes based by a select box value

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related