patternjavascriptMinor
Using JavaScript to add and delete rows from an HTML 5 form
Viewed 0 times
rowsdeletejavascriptusingandformfromhtmladd
Problem
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.
Live example here
An HTML5 page containing a simple form with one row:
```
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
Live example here
An HTML5 page containing a simple form with one row:
Add Elements to a Form
Add Rows:
Let's do Lunch
My
Select a lunch item
Baloney
Yogurt
Apple
Government Cheese
has a
First
Second
name. It's
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
Solution
You should probably have a look at https://stackoverflow.com/questions/5805059/select-placeholder#answer-8442831 and make the first line non-selectable by HTML only.
It's done by making the first element selected, disabled and by adding a display:none.
It's done by making the first element selected, disabled and by adding a display:none.
Context
StackExchange Code Review Q#20263, answer score: 2
Revisions (0)
No revisions yet.