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]" 我可以在该框中输入数据，但是

问题 1

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

问题 2

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

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

Answer 1

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

<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 函数才能不重置文本值并为文本框使用正确的名称