Question

如何创建一个下拉框，当选择该值时，它将在同一表单上创建更多文本字段。

我有一个选择选项字段，询问“您需要多少个类别？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〜

Answer 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代码，但我不会为你做这件事;）。

P.S。而不是使用.keyup，你可能想要使用.change而不是......

Answer 2

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

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

Answer 4

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

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

表：消息 id messagetext category1 category2 category3 category 4

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

另一种选择是这样的：

表：消息 id消息文本

表：类别 id categoryname

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

?>

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

4 个答案: