Javascript在表中动态添加字段而不更新表单

问题描述：

JSFiddle with the code: http://jsfiddle.net/wxLa80od/

I have a html page which is looks like:

<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td>     <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td </tr>

<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>

<tr><td></td><td><input  type="button" id="2" value="+ Add More"  onclick="addExp()"/></td></td></tr>
</table>
</form>

with javascript code

<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

document.getElementById("exp").innerHTML +="<br/><tr><td>Job role</td><td>
<input type='text' id='role"+ countBox +"'  name='role"+ countBox+"'/></td>     
<td>Company name</td><td><input type='text' name='comp"+ countBox +"'   
id='comp"+countBox +"''/> </td></tr>";
       countBox += 1;
}

</script>

The code is running well but the problem is when I click "Add more" button the dynamic added fields is getting empty!

I want to fill all data in the form so I can pass them to php file.

Could someone perhaps tell me please how I can not clear the fields?

Thanks in advance.

JSFiddle代码： http://jsfiddle.net/wxLa80od/ p>

我有一个html页面，如下所示： p>

 ＆lt; form action =“cvformphp.php”method =“post”＆gt; 
＆lt; table id =“cvtable”＆gt; 
＆lt; tr＆gt;＆lt; td＆gt;＆lt; h2＆gt;个人信息＆lt; / h2＆gt;＆lt;  ; / td＆gt;＆lt; / tr＆gt; 
＆lt; tr＆gt;＆lt; td＆gt;名称*＆lt; / td＆gt;  ＆lt; td＆gt;＆lt; input type =“text”name =“name”＆gt;＆lt; / td＆gt;＆lt; / td＆gt; 
＆lt; tr＆gt;＆lt; td＆gt;电子邮件*＆lt; / td＆gt;＆lt; td＆gt;＆lt;  ; input type =“Email”name =“email”＆gt;＆lt; / td＆gt;＆lt; / tr＆gt; 
＆lt; tr＆gt;＆lt; td＆gt;＆lt; h2＆gt;经验＆lt; / h2＆gt;＆lt; / td＆gt;＆lt; /  tr＆gt; 
＆lt; tr＆gt;＆lt; td＆gt;作业角色＆lt; / td＆gt;＆lt; td＆gt;＆lt; input type =“text”id =“role1”name =“role1”＆gt;＆lt; / td＆gt;  ＆lt; td＆gt;公司名称＆lt; / td＆gt;＆lt; td＆gt;＆lt; input type =“text”id =“comp1”name =“comp1”＆gt;＆lt; / td＆lt; / tr＆gt; 
 
＆lt;输入类型 =“text”hidden =“hidden”value =“1”id =“countexp”name =“countexp”/＆gt; 
＆lt; tbody id =“exp”name =“exp”＆gt;＆lt; / tbody＆gt; 
  
＆lt; tr＆gt;＆lt; td＆gt;＆lt; / td＆gt;＆lt; td＆gt;＆lt; input type =“button”id =“2”value =“+ Add More”onclick =“addExp（）”/＆gt;＆lt;  / td＆gt;＆lt; / td＆gt;＆lt; / tr＆gt; 
＆lt; / table＆gt; 
＆lt; / form＆gt; 
  code>  pre> 
 
 使用javascript代码 p> \  n 
 
 ＆lt; script＆gt; 
var countBox = 2; 
function addExp（）
 {
 ndocument.getElementById（“countexp”）。value = countBox; 
 
document.getElementById（“exp  “）.innerHTML + =”＆lt; br /＆gt;＆lt; tr＆gt;＆lt; td＆gt;工作角色＆lt; / td＆gt;＆lt; td＆gt; 
＆lt;输入类型='文字'id ='角色“+ countBox +”'  name ='role'+ countBox +“'/＆gt;＆lt; / td＆gt; 
＆lt; td＆gt;公司名称＆lt; / td＆gt;＆lt; td＆gt;＆lt; input type ='text'name ='comp”+ countBox +“'  
id ='comp“+ countBox +”''/＆gt;＆lt; / td＆gt;＆lt; / tr＆gt;“; 
 countBox + = 1; 
} 
 
＆lt; / script＆gt; 
  代码>  pre> 
 
 代码运行良好但问题是当我点击“添加更多”按钮时，动态添加的字段变空了！ strong>  p> \  n 
 
我想填写表单中的所有数据，以便将它们传递给php文件。 p> 
 
 

有人可能会告诉我，我怎么不能清除字段？ 
 
 
提前致谢。 p> 
  div>

答

When using innerHtml, you ALWAYS replace the content with the newly defined content, even if you use +=. That's why your dynamic content is empty after each click on the button.

I will provide 2 solutions for this problem. One of them requires the use of jQuery, the other doesn't (but is more complicated):

Solution 1 (WITH jQuery)

function addExp()
{
document.getElementById("countexp").value= countBox;

    $("#exp").append("<tr><td>Job role</td> \
        <td><input type='text' id='role"+ countBox +"'  \
        name='role"+ countBox+"'/></td><td>Company name</td>\
        <td><input type='text' name='comp"+ countBox +"' \
        id='comp"+countBox +"''/> </td></tr>");

    countBox += 1;
}

jsFiddle: http://jsfiddle.net/wxLa80od/4/

Solution 2 (WITHOUT jQuery)

function addExp()
{
    document.getElementById("countexp").value= countBox;

    var newChild = document.createElement("tr");
        document.getElementById("countexp").value= countBox;

    // Create an empty <tr> element and add it to the 1st position of the table:
    var row = document.getElementById("exp").insertRow(-1);

    // Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    // Add some text to the new cells:
    cell1.innerHTML = "Job role";
    cell2.innerHTML = "<input type='text' id='role"+ countBox +"' name='role"+ countBox+"'/>";  
    cell3.innerHTML = "Company name"; 
    cell4.innerHTML = "<input type='text' name='comp"+ countBox +"'id='comp"+countBox +"''/>";



        countBox += 1;
}

jsFiddle: http://jsfiddle.net/wxLa80od/2/

Also a quick note: do NOT use <br/> in between two rows <tr>, it can create a mess really quickly. Please use css for this (example: margin-bottom: 15px;)

答

innerHTML does not get the value inputted from keyboard. You may use appendChiled. In that case you should create element using createElement statement. It is easier to use jquery. Try following code

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
var countBox =2;
function addExp()
{
document.getElementById("countexp").value= countBox;

$("#exp").append("<br><tr><td>Job role</td><td><input type='text' id='role"+ countBox +"'  name='role"+ countBox+"'/></td><td>Company name</td><td><input type='text' name='comp"+ countBox +"' id='comp"+countBox +"''/> </td></tr>");
       countBox += 1;
}

</script>

</head>
<body>

<form action="cvformphp.php" method="post">
<table id="cvtable">
<tr><td><h2>Personal Info</h2></td></tr>
<tr><td>Name* </td> <td><input type="text" name="name"></td></td>
<tr><td>Email* </td><td><input type="Email" name="email"></td></tr>
<tr><td><h2>Experiences</h2></td></tr>
<tr><td>Job role </td><td><input type="text" id="role1" name="role1"></td>     <td>Company name</td><td><input type="text" id="comp1" name="comp1"></td ></tr>

<input type="text" hidden="hidden" value="1" id="countexp" name="countexp"/>
<tbody id="exp" name="exp"></tbody>

<tr><td></td><td><input  type="button" id="2" value="+ Add More"  onclick="addExp()"/></td></td></tr>
</table>
</form>

</body>
</html>

Javascript在表中动态添加字段而不更新表单

相关推荐