嗨我根据输入的数量使用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>
您可以将数组用于输入字段。这样你可以使用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])
}
}
<!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>