0

How do I make a drop down box that when the value is selected it will create that many more text fields on the same form.

我有一个选择选项字段，询问“您需要多少个类别？1-6”如果用户选择 3，它将在同一个表单上创建 3 个新文本字段，要求用户输入每个类别的名称。如果是 6 个类别，那么它将生成 6 个文本字段。

单击提交按钮后，数据将进入插入页面并更新数据库。我的问题是根据选择选项值生成新的文本字段。

<select name="num_cat" onchange="document.textbox.value=this.value">
<option value="1">1</option>
<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>
</select>

<input type="text" name="textbox" id="textbox">

<?php
If $_POST[num_cat] == 1{
echo ;
}else 
?>

这就是我迷路的地方。在数据库中，我有 Category1、Category2 等字段，这些字段将由生成的文本字段的值填充。

如果有人有任何建议或示例，我将非常感激。谢谢你。

~G~

4

4 回答 4

2

Its seems like you really just need to use a loop to output the number of fields that you require.

For example:

You would have a form which would ask the user the amount of fields they need

form.php

<form action="category_form.php" method="get">
    Number of fields required:  
    <select id="num_cat" name="num_cat">
        <option value="0">0</option>
        <option value="1">1</option>
        <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>
    </select>
    <input type="submit" name="submit" value="Submit"/>
</form>

category_form.php

if(isset($_GET['submit']) && isset($_GET['num_cat'])){

    $num_of_fields = $_GET['num_cat']; //WARNING: Requires validation/sanitisation

    echo '<form method="post" action="action.php">';
    for($i=1; $i<=$num_of_fields; $i++){
        echo '<input type="text" name="category-'.$i.'" />';
    }
    echo '<input type="submit" name="submit" value="Submit"/>';
    echo '</form>';
}

HOWEVER, this would be far easier if you used JQuery to dynamically update the amount of fields as this would remove the need to refresh the page. You can do this by using the code below.

index.html

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" ></script>
    <script type="text/javascript">
        //when the webpage has loaded do this
        $(document).ready(function() {  
            //if the value within the dropdown box has changed then run this code            
            $('#num_cat').change(function(){
                //get the number of fields required from the dropdown box
                var num = $('#num_cat').val();                  

                var i = 0; //integer variable for 'for' loop
                var html = ''; //string variable for html code for fields 
                //loop through to add the number of fields specified
                for (i=1;i<=num;i++) {
                    //concatinate number of fields to a variable
                    html += 'Category ' + i + ': <input type="text" name="category-' + i + '"/><br/>'; 
                }

                //insert this html code into the div with id catList
                $('#catList').html(html);
            });
        }); 
    </script>
</head>
<body>
    <form method="post" action="action.php">
        Number of fields required:      
        <select id="num_cat" name="num_cat">
            <option value="0">- SELECT -</option>
            <option value="1">1</option>
            <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>
        </select>

        <div id="catList"></div>
        <input type="submit" name="submit" value="Submit"/>
    </form>
</body>
</html>

This will then update on the fly instead of having to reload a PHP page every time to generate the fields.

Obviously you will need to add CSS code but im not doing that for you ;).

P.S. Instead of using .keyup you may want to use .change instead...

于 2011-11-01T17:27:55.900 回答
1

研究使用 jQuery 将循环生成的代码注入到您的表单中。

于 2011-11-01T16:38:30.403 回答
1

尝试这样的事情：

<?php
if(isset($_POST[num_cat])) {
    $cats = intval($_POST[num_cat]);

    for(i=1;i>=$cats;i++) {
        echo '<input type="text" name="cat-'.i.'" />';
    }
?>

这将获取选择框值并回显 x 个类别的文本框。您可以将其包装在一个表单中，然后您将能够提交它并将数据写入您的数据库。

于 2011-11-01T16:50:59.627 回答
0

听起来您需要考虑您的架构以确保它可针对您的目的进行扩展。

一种方法是这样（有点像你现在的样子）：

表：message id messagetext category1 category2 category3 category 4

当您拥有大量数据集时，这会更方便，因为它消除了执行多个连接。问题是当你想拥有第五个类别时会发生什么？

另一种选择是这样：

表：消息 id 消息文本

表：类别 id 类别名称

表：messages_categories id messageID categoryID

这样，您可以拥有任意数量的类别，而不必为每条消息指定一个类别。

因此，如果您宁愿坚持使用现有选项，您可以尝试调用 javascript 函数来添加字段。

<select name="num_cat" onchange="addField(this.value)">...

function addField(num) {
  for (i=0; i<num; i++) {
    var newinput = document.createElement('text');
    /* If you use bracket notation like this (only on the name parameter), it will treat it like an array*/
    newinput.name = 'Cat[]';
  }
}

<?php

//This will now be an array you can loop over
$_POST['Cat']; 

?>
于 2011-11-01T17:00:23.163 回答