Issues Adding rows upon submit with Javascript
I'm trying create a form where when the "+" button is pressed, a new row of four input blank boxes is created. Now, when "+" is press开发者_运维百科ed, it copies the row (and anything typed in it) identically.
How can I create a blank row? How can I have only one "+" button rather than a new one on each new column?
Heres the page: http://myvirtualltciguy.com/Client_Intake_Meds.html
You can try this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Meds - Test
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="My Virtual LTCI Guy">
<meta name="keywords" content="My Virtual LTCI Guy">
<meta name="author" content="My Virtual LTCI Guy">
<link rel="stylesheet" href="http://myvirtualltciguy.com/css/ltci_style.css" type="text/css" media="screen" charset="utf-8">
<script type="text/JavaScript">
function addOneRow(){
//table
var table = document.getElementById('mytable');
//body of the table
var tabBody = table.getElementsByTagName("TBODY").item(0);
var numberRow = table.rows.length;
//***********Row
var row = table.insertRow(-1); // appends to the end
//columns
var column = row.insertCell(-1);
column.id = 'column_' + numberRow;
column.innerHTML = '<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_a" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_b" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_c" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<input type="text" name="textfield_d" style="width:105px;">';
column = row.insertCell(-1);
column.innerHTML = '<select name="select" style="visibility:hidden;"></select>';
tabBody.appendChild(row);
numberRow--;
var previousButton = document.getElementById('column_'+numberRow);
previousButton.innerHTML = "";
}
</script>
</head>
<body>
<div id="contain">
<div style="padding:20px 0px 10px 40px;">
<b>Medications:</b>
</div>
<div style="padding:0px 0px 0px 35px;">
<form action="" method="get">
<table id="mytable" width="604" cellpadding="5px">
<thead>
<tr>
<td width="35">
</td>
<td width="109">
Name:
</td>
<td width="106">
Dose:
</td>
<td width="112">
Frequency:
</td>
<td width="153">
Reason Prescribed:
</td>
<td width="13">
</td>
</tr>
</thead>
<tbody>
<tr>
<td id="column_1" width="24">
<input name="button" type="button" value="+" onclick="addOneRow()" style="height:20px; font-size:11px;">
</td>
<td width="105">
<input type="text" name="textfield_a" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_b" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_c" style="width:105px;">
</td>
<td width="105">
<input type="text" name="textfield_d" style="width:105px;">
</td>
<td width="56">
<select name="select" style="visibility:hidden;">
</select>
</td>
</tr>
</tbody>
</table>
</form>
</div><img src="http://myvirtualltciguy.com/img/ltci_line.png" style="padding:20px 0px 20px 40px;">
<div class="submit2">
<input type="submit" value="Submit" style="height:30px;">
</div>
</div>
</body>
</html>
Adding a new row with jQuery (doing DOM manipulation like this by hand is painfully tedious):
<table id="data">
<tr>
<td>
<label>
Foo
<input name="foo[]" />
</label>
</td>
<td>
<label>
Bar
<input name="bar[]" />
</label>
</td>
<td>
<label>
Baz
<input name="baz[]" />
</label>
</td>
<td>
<label>
Qux
<input name="qux[]" />
</label>
<button id="add">+</button>
</td>
</tr>
</table>
$(function() { // will run after the DOM tree loaded
$('#add').click(function() {
$('#add').detach();
$('#data tr:last').clone().val(null).insertAfter($('#data tr:last'));
$('#add').append('#data td:last');
});
});
Using input names like foo[]
works nicely with PHP, which will return all the inputs in that column in an array named foo
. If you don't want that, you have to change field names in the new row manually. Also, if you want an accessible site, you should have a non-javascript fallback for adding new rows... things get complicated from there.
精彩评论