Javascript在表中動態添加字段而不更新表單
[英]Javascript adding fields dynamically in table without updating the form
問題描述
JSFiddle 代碼： http : //jsfiddle.net/wxLa80od/
我有一個 html 頁面，它看起來像：
<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>
使用 javascript 代碼
<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>
代碼運行良好，但問題是當我單擊“添加更多”按鈕時，動態添加的字段變空了！
我想填寫表單中的所有數據，以便我可以將它們傳遞給 php 文件。
有人可以告訴我我如何無法清除字段嗎？
提前致謝。
3 個解決方案
解決方案1
2 已采納 2015-04-15 09:39:48
使用innerHtml ，即使使用+= ，也始終用新定義的內容替換內容。 這就是為什么每次點擊按鈕后您的動態內容都是空的。
我將為這個問題提供2個解決方案。 其中一個需要使用 jQuery，另一個不需要（但更復雜）：
解決方案 1（使用 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/
解決方案 2（沒有 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/
另外一個快速的注意：不要使用<br/>在兩行之間<tr>它可以真正快速創建一個爛攤子。 請為此使用 css（例如： margin-bottom: 15px; ）
解決方案2
0 2015-04-15 09:39:11
innerHTML 不獲取從鍵盤輸入的值。 您可以使用 appendChiled。 在這種情況下，您應該使用 createElement 語句創建元素。 使用jquery更容易。 試試下面的代碼
<!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>
解決方案3
0 2020-07-05 13:08:41
根據這個問題的回答，我同意了。 但！ 我們可以為所需/預期的結果做必要的事情，如下所示，如果您對 JavaScript 很了解，也可以為預期/所需的結果制作自己的東西。
function getInputValues(container){
if(!(container instanceof Node) || !(container instanceof HTMLElement)){
container = document.querySelector(container);
}
let values = {};
container.querySelectorAll("INPUT").forEach((el)=>{
values[el.name] = el.value;
});
return values;
}
function setInputValues(container, values){
if(!(container instanceof Node) || !(container instanceof HTMLElement)){
container = document.querySelector(container);
}
Object.keys(values).forEach((key)=>{
container.querySelector("INPUT[name='"+key+"']").value = values[key];
});
}
在document.getElementById("exp").innerHTML +=您必須獲取值，在添加/更新 html 之后，您必須為相同的輸入設置值，如果要將輸入名稱用作數組，則可以還可以設置索引值，還可以將輸入屬性從 name 更改為 id 或getInputValues函數中的任何其他唯一屬性，以使一切都完美無缺。
我為我自己的項目編寫了這段代碼，如果需要，您也可以自己制作，否則它會對您有所幫助
使用JavaScript和JSONField動態地將字段添加到Django表單
[英]Adding fields to a Django form dynamically with JavaScript & JSONField
在表中動態添加更多表單字段不會調整行的高度
[英]Dynamically adding more form fields in a table does not resize the height of the row
根據使用Java組合框的選擇動態添加表單字段
[英]Adding dynamically form fields depending on selection of combo box with Javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.