Dynamically create textboxes using javascript and insert that text box values into mysql
Question
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.
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>
3 answers
solution1
0 2013-06-14 06:09:53
<!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>
solution2
0 2011-08-18 10:49:00
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.
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.
solution3
0 2011-08-18 10:50:25
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:
<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:
$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])
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.