0

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?

4

4 回答 4

3

非常简单的例子（也在这里演示）：

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

这假设您需要以下结构作为输入：

<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>

关于服务器端，您现在将看到使用$_REQUEST['step1']、$_REQUEST['step2']等的输入。或者，根据您的表单方法，它们也会显示在$_POST或$_GET中。

于 2012-04-13T12:49:22.813 回答
0

你可以这样做：

<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>
于 2012-04-13T12:53:37.027 回答
0

这是我的解决方案：

<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>
于 2012-04-13T12:59:26.803 回答
0

我为你写了一些基本的功能。但是您需要根据需要扩展它：

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

参见jsFiddle

于 2012-04-13T12:49:36.450 回答