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

I want to create a form for my client. My client require to create a dynamic for him. Suppose, I want to insert 1 record in main table of mysql, and record multiple records in secondary table which has reference key of main table. I don't know how many records against the main table, it maybe one at time or multiple records at time. I want to do it with single form. If client click add more button it show another text field to insert more data. how I can do it ?????

我想为我的客户创建一个表单。我的客户需要为他创造一个动态。假设，我想在mysql的主表中插入1条记录，并在具有主表的引用键的辅助表中记录多条记录。我不知道对主表有多少记录，可能是一次或多次记录。我想用单一形式来做。如果客户端单击添加更多按钮，则会显示另一个文本字段以插入更多数据我怎么能这样做?????

4 个解决方案

#1

It would be possible using pure javascript

like this

喜欢这个

<input type="button" onclick="addInput()"/>

<span id="responce"></span>
<script>
var countBox =1;
var boxName = 0;
function addInput()
{
     var boxName="textBox"+countBox; 
document.getElementById('responce').innerHTML+='<br/><input type="text" id="'+boxName+'" value="'+boxName+'" "  /><br/>';
     countBox += 1;
}
</script>

#2

This isn't php related, you'll need to dynamically add to the form using javascript.

这不是PHP相关的，你需要使用javascript动态添加到表单。

#3

This is possible through the jquery/javascript.

这可以通过jquery / javascript实现。

So you can use this reference :http://www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

所以你可以使用这个参考：http：//www.mkyong.com/jquery/how-to-add-remove-textbox-dynamically-with-jquery/

Just try it!!

去尝试一下！！

#4

here is the code:

这是代码：

    function generateTextBox()
    {

     var mainDiv=document.getElementById('options');
     alert(mainDiv);
     var newBreak=document.createElement('br');
      mainDiv.appendChild(newBreak);
    for(var i=1;i<=4;i++)
      {

     var newTextBox=document.createElement('input');
     var newBreak1=document.createElement('br');
     var newBreak2=document.createElement('br');
     var newBreak3=document.createElement('br');
     var text = document.createTextNode("Option"+i);


     newTextBox.type='text';

     newTextBox.setAttribute('id','txtAddr'+i);
         alert(newTextBox+"2");
        mainDiv.appendChild(text);
     mainDiv.appendChild(newTextBox);
     mainDiv.appendChild(newBreak1);
     mainDiv.appendChild(newBreak2);
     mainDiv.appendChild(newBreak3);


     }
}

#1

It would be possible using pure javascript