Javascript function to add / remove fields
I'm not very good with JavaScript, but this code was similar to what I was looking for, especially where it contains a Remove Field link. Here is the Javscript function:
//Add more fields dynamically.
function addField(field,area,limit) {
if(!document.getElementById) return; //Prevent older browsers from getting any further.
var field_area = document.getElementById(area);
var all_inputs = field_area.getElementsByTagName("input"); //Get all the input fields in the given area.
//Find the count of the last element of the list. It will be in the format '<field><number>'. If the
// field given in the argument is 'friend_' the last id will be 'friend_4'.
var last_item = all_inputs.length - 1;
var last = all_inputs[last_item].id;
var count = Number(last.split("_")[1]) + 1;
//If the maximum number of elements have been reached, exit the function.
// If the given limit is lower than 0, infinite number of fields can be created.
if(count > limit && limit > 0) return;
if(document.createElement) { //W3C Dom method.
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
} else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
}
}
Here's the HTML for the form:
<form name="frm" method="POST">
<strong>Neutral List</strong><br />
<ol id="neutrals_area">
<li><input type="text" name="neutral_1" id="neutral_1" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_2" id="neutral_2" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_3" id="neutral_3" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_4" id="neutral_4" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
<li><input type="text" name="neutral_5" id="neutral_5" /> <a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>
</ol>
<input type="button" value="Add Neutral Field" onclick="addField('neutrals_area','neutral_',0);" />
</form>
However, I would like the additional fields to be generated with the "Remove Link" code, not just the code in the script. I understand that UDFs should be configured to enable this behavior, but I am having all the trouble trying to get this function to work. Apparently it's easy to do this in an older method, following the "} else {" at the bottom of the addField function, editing the code to read:
} else { //Older Method
field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /><a style="cursor:pointer;color:blue;" onclick="this.parentNode.parentNode.removeChild(this.parentNode);">Remove Field</a></li>";
}
However, I don't understand how to include it in the W3C DOM method?
source to share
I will be different from Kappa and strongly encourage you to keep doing what you do. JQUery is great for what it is, but it's too often a crutch and it's so important to know what you are doing and why you are doing it when working with javascript. Especially if you are learning to work in the sector, you need direct JavaScript.
The good news is, what you are trying to do is actually quite simple!
var li = document.createElement("li");
var input = document.createElement("input");
input.id = field+count;
input.name = field+count;
input.type = "text"; //Type of field - can be any valid input type like text,file,checkbox etc.
li.appendChild(input);
field_area.appendChild(li);
//create the removal link
removalLink = document.createElement('a');
removalLink.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode)
}
removalText = document.createTextNode('Remove Field');
removalLink.appendChild(removalText);
li.appendChild(removalLink);
Here's the code on a JSFiddle: http://jsfiddle.net/r9bRT/
source to share
Remove those conditions if(!document.getElementById)
and if(document.createElement)
. Every browser supports them, and those that don't deserve support (let them throw their bugs).
To add a remove-to method to generated DOM elements, simply use the property onclick
. You can also use the standard-compatible addEventListner () , but this requires some IE workarounds. See Legacy Internet Explorer and attachEvent and The Old Way to Register Event Listeners .
So the code will be
...
li.appendChild(document.createTextNode(" ");
var a = document.createElement("a");
a.appendChild(document.createTextNode("Remove Field"));
a.style = "cursor:pointer;color:blue;";
a.onclick = function() {
// this.parentNode.parentNode.removeChild(this.parentNode);
// nay. we have better references to those objects:
field_area.removeChild(li);
};
li.appendChild(a);
source to share