HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

Using JavaScript to add and delete rows from an HTML 5 form

Submitted by: @import:stackexchange-codereview··
0
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:


    
    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.

Context

StackExchange Code Review Q#20263, answer score: 2

Revisions (0)

No revisions yet.