javascript - 在一个数据库字段中插入多个文本框的数据

Question

<script type="text/javascript">
var i = 1;
function generateRow() {
var d=document.getElementById("div");
d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";
i = i + 1;
}

<?php $this->Form->input('textbox1',array(
                'type' => 'textbox',
                'label' => false,
                'required')); ?>
              <div id="div"></div>

    <input type="button" value="Add" onclick="generateRow()"/>

文本框1的HTML

<div class="input textbox"><input name="data[Post][textbox1]"
 required="required"type="textbox" id="PostTextbox1"/></div>

当我单击“添加”按钮时，它会生成新的文本框，name="[Post][textbox1][1]" 我可以在该框中输入数据，但是

第一期

当我再次单击添加按钮时，它将重置所有文本框，我必须再次输入这些数据

第 2 期

$tbVal = $this->request->data['Post']['textbox1'];
$inn = implode(',',$tbVal);

当我使用此代码从文本框中内爆数据时，它只显示第一个数据

Answer 1

您已经重置了 divdocument.getElementById("div")中的所有数据，因为它重置了文本框中的所有数据。

尝试 ：

//Create an input type dynamically.
var element = document.createElement("input");
//Assign different attributes to the element.
element.setAttribute("type", type);
element.setAttribute("value", type);
element.setAttribute("name", type);
var foo = document.getElementById("fooBar");
//Append the element in page (in span).
foo.appendChild(element);

点击按钮

Answer 2

这是一个基于第一个答案和我的答案的工作示例：

<script type="text/javascript">
var i = 1;
function generateRow() 
{

    //Create an input type dynamically.
    var element = document.createElement("input");
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "");
    element.setAttribute("name", "data[Post][textbox][" + i + "]");
    var foo = document.getElementById("fooBar");
    //Append the element in page (in span).
    foo.appendChild(element);

    i = i + 1;

}
</script>

<form>

<div id="fooBar" class="input textbox">
    <input name="data[Post][textbox][0]" required="required" type="textbox" id="PostTextbox1"/>
</div>

<input type="button" value="Add" onclick="generateRow()"/>
<input type="submit" >
</form>

<?php
print_r($_REQUEST);
?>

您必须使用 DOM 操作 javascript 函数来不重置文本值并为文本框使用正确的名称

Answer 3

关于问题 2

这段代码：

d.innerHTML+="<p><input type='text' name='[Post][textbox1][" + i + "]'>";

不得不

d.innerHTML+="<p><input type='text' name='data[Post][textbox1][" + i + "]'>";