[英]Dynamically create textboxes using javascript and insert that text box values into mysql
嗨，我根據輸入的數量使用 javascript 動態創建了一些文本框。 我想將該文本框值保存到 mysql 數據庫。 我對 javascript 很陌生。 提前致謝。
這是我的代碼：
<script>
function add_col()
{
var num_box = document.getElementById("num_text").value;
if(num_box)
{
for(var i=0; i<num_box; i++)
{
var tableName1 = document.getElementById("uTable");
var newTR1 = document.getElementById("tr1");
var newName1 = document.createElement("TD");
newName1.innerHTML = "<input type='text' name='site' id='site' value='cell value'>";
var newTR2 = document.getElementById("tr2");
var newPhone1 = document.createElement("TD");
newPhone1.innerHTML = "<input type='text' name='cell' id='cell' value='site value'>";
newTR1.appendChild(newName1);
newTR2.appendChild(newPhone1);
tableName1.appendChild(newTR1);
tableName1.appendChild(newTR2);
document.form1.reset()
}
}
}
</script>
<form name="form1" id="form1" method="post">
<p>
<input type="text" name="num_text" id="num_text"/>
<input type="button" name="Submit" value="INPUT" onclick="add_col();" />
</p>
<p> </p>
<table id="uTable"width="183" border="0">
<tr id="tr1">
<td>Name</td>
</tr>
<tr id="tr2">
<td>Phone</td>
</tr>
</table>
<input type="submit" name="Submit2" value="Insert" />
</form>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript">
function addElement() {
var ni = document.getElementById('myDiv');
// var numi = document.getElementById('theValue');
// var num = document.getElementById('theValue').value;
var a = '';
for(var i = 1; i <= 3; i++)
{
a += '<input type="text" name="TextBox'+i+'" value="TextBox'+i+'" >';
}
ni.innerHTML = a;
ni.appendChild(ni);
}
</script>
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div id="myDiv">
</div>
<input type="button" id="btnOfficial" value="Add Another TextBox" onclick="addElement();" />
<input type="hidden" value="1" id="theValue" />
</form>
</body>
</html>
您可以為輸入字段使用數組。 這樣你就可以有 name='cell[]' 和 name='site[]' 之類的東西，然后將數組傳遞給服務器。 此外，您可能想查看 jquery 以幫助您使用 javascript。 只是讓它更干凈，更容易使用javascript。
我也可能會放棄使用桌子。 查看定義列表。 此鏈接將有所幫助： http://www.maxdesign.com.au/articles/definition/添加或刪除元素會更容易。
您需要做的是在輸入名稱上使用[] - 以便將整個數組傳遞到您的服務器端：
newName1.innerHTML = "<input type='text' name='site[]' id='site' value='cell value'>";
newPhone1.innerHTML = "<input type='text' name='cell[]' id='cell' value='site value'>";
您還需要在 html 中指定提交目標：
<form name="form1" id="form1" method="post" target="myscript.php">
然后在您的服務器端程序中，您可以訪問提交值的數組。 您沒有指定您使用的服務器端技術； 假設它是 PHP 並且您正在提交表單，您將執行以下操作：
$sites = $_POST['site'];
$cells = $_POST['cell'];
if(count($sites) != count($cells))
{
// error - number of values don't match
}
elseif(count($sites) == 0)
{
// no data to insert
}
else
{
$cnt = count($sites);
for($i=0; $i<$cnt; $i++)
{
//insert into the table pairs ($sites[$i] - $cells[$i])
}
}
HTML5動態創建文本框數組並設置文本框的文本
[英]HTML5 Create an array of textboxes dynamically and set text of the text box
僅使用JavaScript將值從動態創建的文本框傳遞到數組
[英]Passing the values from dynamically created textboxes to an array using JavaScript only
將動態創建的文本框值按順序存儲在 javascript 數組中
[英]Store dynamically created text box values in an javascript array in an order
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.