Im trying create a form where when the "+" button is pressed a new row of four input blank boxes is created. Now when "+" is pressed 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
Cheers!
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.