I am a Javascript beginner. Here's a fictional example which isolates the functionality mentioned in the subject line. I hope to employ this functionality as part of a larger web application in the real world soon.
EDIT: Live example here
An HTML5 page containing a simple form with one row:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Add Elements to a Form</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="addrow">
<label for="addnum">Add Rows:
<input type="text" name="addnum" id="addnum" value="" size="2">
</label>
<input type="button" name="addbtn" id="addbtn" value="Go!">
</div>
<br>
<fieldset id="lunches">
<legend>Let's do Lunch</legend>
<div class="formrow">
<span>My </span>
<select name="lunch[]" class="dropdown">
<option value="">Select a lunch item</option>
<option value="baloney">Baloney</option>
<option value="yogurt">Yogurt</option>
<option value="apple">Apple</option>
<option value="cheese">Government Cheese<option>
</select>
<span> has a </span>
<select name="firstorlast[]" class="dropdown">
<option value="first">First</option>
<option value="second">Second</option>
</select>
<span> name. It's</span>
<input type="text" name="name[]" value="Specify a Name" size="20">
</div>
</fieldset>
<script src="js/utilities.js"></script>
<script src="js/addelements.js"></script>
</body>
</html>
addelements.js which contains the functionality for adding and removing rows of input. Each added row will have a button which, when clicked, will delete the row from the form. The first row cannot and should not be deleted:
window.onload = function() {
'use strict';
//U.addEvent is a cross-browser way to add an event handler to a DOM object.
//U.$ is a shortcut to getElementById
//Idea taken from Larry Ullman's "Modern Javascript: Develop and Design
U.addEvent(U.$('addbtn'), 'click', addRows);
}
function addRows() {
'use strict';
var numRowsToAdd = U.$('addnum').value;
for(var i = 0; i < numRowsToAdd; i++){
addRow();
}
}
function addRow() {
'use strict';
var sourceNode = document.querySelector('.formrow');
var newRow = sourceNode.cloneNode(true);
//every row except the first row should have a delete button associated with it.
var delButton = document.createElement('input');
delButton.className = 'delbtn';
delButton.type = 'button';
delButton.name = 'delbtn';
delButton.value = 'Delete This Row';
U.addEvent(delButton, 'click', function() {removeRow(delButton)});
newRow.appendChild(delButton);
var fieldset = U.$('lunches');
fieldset.appendChild(newRow);
}
function removeRow(obj) {
'use strict';
var theRow = obj.parentNode;
var theRowParent = theRow.parentNode;
theRowParent.removeChild(theRow);
}
relevant code from utilities.js:
var U = {
// For getting the document element by ID:
$: function(id) {
'use strict';
if (typeof id == 'string') {
return document.getElementById(id);
}
},
addEvent: function(obj, type, fn) {
'use strict';
if (obj && obj.addEventListener) { // W3C
obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) { // Older IE
obj.attachEvent('on' + type, fn);
}
}
}
If you copy and save these into the proper files with the proper path structure, it should work for you.
