Question

我正在尝试使用PHP将某些句子插入MySQL数据库。但是该字段的设计是这样一种方式，它只显示一个字段和[add]按钮来插入新的文本字段。因此，根据用户需求，文本字段的数量会有所不同。

<div class="row">
  <h5>LEARNING GOALS</h5>
    <div style="display:table; width:100%;">
      <div style="display:table-row;">
        <div style="display:table-cell;">
           <input class="text-field" name="goal" type="text" placeholder="Goals*" style="width:100%">
        </div>
        <div style="display:table-cell; vertical-align:middle;width:65px;">
           <input class="add-field-btn" type="button" value="+" style="width:65px;"></div>
        </div>
     </div>
 </div>

如何添加新的textfiled并指定名称值，当我点击提交按钮时，将所有文本字段值保存到数据库中？

Answer 1

<html>
<head>
<title>jQuery add / remove</title>

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:8px;
    }
</style>

</head>

<body>

<h1>jQuery add / remove </h1>

<script type="text/javascript">

$(document).ready(function(){

    var counter = 2;

    $("#addButton").click(function () {

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }   

    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="textbox' + counter + '" value="" >');

    newTextBoxDiv.appendTo("#TextBoxesGroup");


    counter++;
     });

     $("#removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
       }   

    counter--;

        $("#TextBoxDiv" + counter).remove();

     });

     $("#getButtonValue").click(function () {

    var msg = '';
    for(i=1; i<counter; i++){
      msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
    <div id="TextBoxDiv1">
        <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
    </div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

Answer 2

Demo检查这个小提琴。

document.getElementById('#whereToAppend').append('<input type="text" name="WhateverYouwant"/>');

document.getElementsByTagName('body')[0].appendChild('<input type="text"/>');

如果需要动态名称，请为输入设置类名或ID。并在javascript中使用setAttribute来设置名称

Answer 3

一种解决方案是尝试序列化所有输入并将它们保存到数据库中。您只需通过提交表单发送它们，然后在PHP中执行以下操作：

$inputs = serialize($_GET); // $inputs = serialize($_POST);
mysql_query('INSERT INTO `table` SET inputs = "'.$inputs.'"'); // try to validate the variable before

鉴于您拥有可变数量的字段，这将是很好的。选择它们时，使用deserialize重新创建数据：

$r = mysql_query('SELECT inputs FROM `table`');
...
$data = deserialize($row['inputs']);

另一个选择是使用JavaScript或jQuery获取所有输入并通过AJAX传递它们。

var _data = [];
$('input.text-field').each(function(i, e) {
    _data.push($(e).val());
});

$.post('file.php', { d : JSON.stringify(_data)}, function(e){
     alert(e);
})

<强> PHP：

$d = json_decode($_POST['d']);

foreach($d as $k => $v) {
   // value of the input no. $k is $v
}

您可以使用@ Nickunj的jQuery代码添加新输入。

Answer 4

首先使用您的文本字段名称作为数组，因此当用户添加新文本字段时，您可以在一个帖子变量中获取所有这些字段，并且可以将它们存储在不同的行中或按照您的需要存储。

现在点击你的按钮追加与

同名的文字字段

your first field code:<input class="text-field" name="goal[]" type="text" placeholder="Goals*" style="width:100%">

Javascript code: $('#yourselector').append('<input class="text-field" name="goal[]" type="text" placeholder="Goals*" style="width:100%">');

服务器端，您可以在$ _POST [＆＃39; goal＆＃39;]中获取所有已发布的值，这将是一个数组;

如何在单击按钮时添加新文本字段？

4 个答案: