Javascript 使用javascript动态创建文本框并将该文本框值插入到mysql中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7106071/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamically create textboxes using javascript and insert that text box values into mysql
提问by Rosi Evangelin
Hi i have created some text boxes dynamically using javascript according to the no of inputs. I want to save that textbox values to mysql database. am very new to javascript. Thanks in advance.
嗨，我根据输入的数量使用 javascript 动态创建了一些文本框。我想将该文本框值保存到 mysql 数据库。我对 javascript 很陌生。提前致谢。
Here is my code:
这是我的代码：
<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>
回答by Matt
You could use an array for your input fields. Such that you could have something like name='cell[]' and name='site[]' then pass the array to the server. Also you may want to look into jquery to help you out with the javascript. Just makes it cleaner and easy to use javascript.
您可以为输入字段使用数组。这样你就可以有 name='cell[]' 和 name='site[]' 之类的东西，然后将数组传递给服务器。此外，您可能想查看 jquery 以帮助您使用 javascript。只是让它更干净，更容易使用javascript。
also i would probably forgo using a table. check out definition lists. This link will help: http://www.maxdesign.com.au/articles/definition/It would be easier to add or remove elements.
我也可能会放弃使用桌子。查看定义列表。此链接将有所帮助： http://www.maxdesign.com.au/articles/definition/添加或删除元素会更容易。
回答by Aleks G
What you need to do is to use []on input names - so that the whole array is passed to your server side:
您需要做的是[]在输入名称上使用- 以便将整个数组传递到您的服务器端：
newName1.innerHTML = "<input type='text' name='site[]' id='site' value='cell value'>";
newPhone1.innerHTML = "<input type='text' name='cell[]' id='cell' value='site value'>";
You'll also need to specify the submit target in your html:
您还需要在 html 中指定提交目标：
<form name="form1" id="form1" method="post" target="myscript.php">
Then in your server-side program, you can access the array of submitted values. You didn't specify what server-side technology you're using; assuming, it's PHP and you're submitting the form, you would do something like this:
然后在您的服务器端程序中，您可以访问提交值的数组。您没有指定您使用的服务器端技术；假设它是 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])
}
}
回答by Vinod Kumar Meena
<!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>
