Javascript dynamically add input fields in form - need help with script
Question
I have the following script which I downloaded as I know nothing about javascript. What I want to do with this script is have the input fields added before the button instead of after it.
I already have one set of input fields hardcoded with titles, so I just want the new ones to be added under them and before the button.
Any help is appreciated.
Not sure how to show code here as none of the code links seem to do anything, so if someone can let me know I will post the code.
<script type="text/javascript">
function addRow(parts)
{
var table = document.getElementById(parts);
var i = table.rows.length;
var newRow = table.insertRow(-1);
newRow.innerHTML =
'<tr><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td></tr>\n'
+ '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
+ '<tr><td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td></tr>\n'
+ '<tr><td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td></tr>\n'
+ '\n';
}
</script>
<input type="button" value="Add New Rrow" onclick="addRow('parts')">
3 answers
solution1
1 2010-12-11 00:46:30
You are much, much better off using a framework like MooTools or jQuery. They make DOM manipulation much easier and more reliable.
solution2
0 2010-12-11 01:16:39
I just tried it and it seems to work. Just watch the extra <tr> tags you are adding to the table row..
This is the final code I used, that works for me.
<html><head>
<script language='javascript' type='text/javascript'>
function addRow(parts) {
var table = document.getElementById(parts);
var i = table.rows.length;
var newRow = table.insertRow(-1);
newRow.innerHTML =
'<td>'+ i +'</td><td><input type="text" name="po' + i + '" style="width: 50px" VALUE=""></td>\n'
+ '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
+ '<td><input type="text" name="po' + i + '" style="width: 510px" VALUE=""></td>\n'
+ '<td><input type="text" name="po' + i + '" style="width: 100px" VALUE=""></td>\n'
+ '\n';
}
</script>
</head><body>
<table id='parts'>
<tr>
<td>ID</td>
<td style='width: 50px;'>FIELD1</td>
<td style='width: 100px;'>FIELD2</td>
<td style='width: 510px;'>FIELD3</td>
<td style='width: 100px;'>FIELD4</td>
</tr>
</table>
<button type='button' onclick='addRow("parts")'>ADD</button>
</body></html>
<sidenote>
Also, as Babiker pointed out, you should check your input fields names, although the browser will probably build a query like:
?po1=val1&po1=val2&po1=val3 ...
..that ie in PHP will be read as an array into $_GET['po1'] as an array with elements val , val2 , val3 , etc. etc...
..html elements names must be unique in the page, and that could cause some problems, (for example, if you use <label> s). You should instead name them po1[0] , po1[1] , etc..
</sidenote>
solution3
0 2010-12-19 18:01:48
This board is weird, obviously not an answer but a followup question.
In my form I have a lot more that just what is in the dynamic function and the form type is post, so not sure of what your referring to with the $_GET statement.
In any event, it only sees the original hard coded input. This is the latest I have. Can there not be a counter that increments and gets added to the input name, like quantity1, quantity2, etc. I have no idea as I know nothing of javascript.
Thanks again
<script language='javascript' type='text/javascript'>
function addRow(parts) { var table = document.getElementById(parts); var i = table.rows.length;
var newRow = table.insertRow(2);
newRow.innerHTML =
'<td><input type="text" name="quantity' + i + '" style="width: 50px" VALUE=""></td>\n'
+ '<td><input type="text" name="part_number' + i + '" style="width: 75px" VALUE=""></td>\n'
+ '<td><input type="text" name="partsdesc' + i + '" style="width: 177px" VALUE=""></td>\n'
+ '<td><input type="text" name="supplier' + i + '" style="width: 140px" VALUE=""></td>\n'
+ '<td><input type="text" name="parts_invoice_id' + i + '" style="width: 90px" VALUE=""></td>\n'
+ '<td><input type="text" name="parts_eta' + i + '" style="width: 90px" VALUE=""></td>\n'
+ '<td><input type="text" name="unitprice' + i + '" style="width: 100px" VALUE=""></td>\n'
+ '\n';
}
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.