PHP - 如何根据选择选项字段值生成新的文本字段？答案

【问题标题】：PHP - How Do I generate new text-fields based upon a select option field value?PHP - 如何根据选择选项字段值生成新的文本字段？
【发布时间】：2011-12-19 15:49:21
【问题描述】：

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~

【问题讨论】：

标签： php select textfield option dynamically-generated

【解决方案1】：

看起来你真的只需要使用一个循环来输出你需要的字段数。

例如：

你会有一个表单来询问用户他们需要多少字段

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

但是，如果您使用 JQuery 动态更新字段数量，这会容易得多，因为这将消除刷新页面的需要。您可以使用下面的代码来做到这一点。

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>

这将即时更新，而不必每次都重新加载 PHP 页面来生成字段。

显然您需要添加 CSS 代码，但我不会为您这样做；）。

附：而不是使用 .keyup 你可能想使用 .change 代替...

【讨论】：

拥有 6 个静态字段，最初只有一个可见，然后根据选择值显示它们要容易得多。这样，您始终可以在 PHP 端验证您拥有 6 个字段。但是，如果您的字段数量不定，那么您的技术就是正确的
是的，这是有道理的。但仅使用 isset($_POST['column-1']) 检查字段是否存在也可以。
@DanielWest index.html 的代码示例正如我所设想的那样工作。我遇到的下一个明显问题是如何将在新生成的文本字段中输入的文本输入到 db.xml 中。我没有在脚本中看到它创建一个由 INSERT 语句调用的变量名。 JeffD 的回应我认为这可能是对我最初想法的改进。你能详细说明一下吗？感谢您的回复先生们。我期待着向大家学习更多。
@JeffD 的回应我认为这可能是对我最初想法的改进。请您再详细说明一下吗？
@DanielWest 我想我要问的是根据索引示例中的代码，此语句中的字符串值是什么？ $sql="INSERT INTO categories (category1, category2, category3) VALUES ('$_POST[]','$_POST[]','$_POST[]')";

【解决方案2】：

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

【讨论】：

【解决方案3】：

试试这样的：

<?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 个类别回显一个文本框。您可以将其包装在一个表单中，然后您就可以提交它并将数据写入您的数据库。

【讨论】：

【解决方案4】：

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

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

表格：消息 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']; 

?>

【讨论】：