如何在單擊按鈕時添加新的文本字段？

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>

如何添加新的文本文件並分配名稱值，以及當我單擊“提交”按鈕時，如何將所有文本字段值保存到數據庫中？

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

演示檢查這個小提琴。

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

首先，將您的文本字段名稱用作數組，這樣當用戶添加新的文本字段時，您可以將所有文本字段保存在一個post變量中，並且可以將它們存儲在其他行中或根據需要存儲。

現在單擊您的按鈕，添加與以下名稱相同的文本字段

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 ['goal']中獲取所有已發布的值，該值將是一個數組；

如何在單擊按鈕時添加新的文本字段？

問題描述

4 個解決方案

解決方案1
4 2014-10-16 07:39:21

解決方案2
0 2014-10-16 07:31:08

解決方案3
0 2014-10-16 07:40:30

解決方案4
0 2014-10-16 07:42:06

如何在單擊按鈕時添加新的文本字段？

問題描述

4 個解決方案

解決方案1 4 2014-10-16 07:39:21

解決方案2 0 2014-10-16 07:31:08

解決方案3 0 2014-10-16 07:40:30

解決方案4 0 2014-10-16 07:42:06

解決方案1
4 2014-10-16 07:39:21

解決方案2
0 2014-10-16 07:31:08

解決方案3
0 2014-10-16 07:40:30

解決方案4
0 2014-10-16 07:42:06