...

View Full Version : How to add new functions to remove field?



mjs
11-21-2010, 07:41 PM
Hi Guys,

Someone please help me how to add new function to remove the field, i have js script function that add new field as follows


<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate.

Old Pedant
11-21-2010, 10:53 PM
That code is already broken.

You create all the new elements with the *SAME* id! ILLEGAL! id's should be unique.

Anyway, you don't tell us how the user is supposed to indicate *which* field to remove.

interfacetricks
11-22-2010, 01:21 AM
Hi Guys,

Someone please help me how to add new function to remove the field, i have js script function that add new field as follows


<script language="javascript">
fields = 0;
function addInput() {
if (fields != 10) {
var htmlText = "&nbsp;&nbsp;<input type='text' name='friends[]' value='' size='auto' maxlength='45' /><br />";
var newElement = document.createElement('div');
newElement.id = 'new_field';
newElement.innerHTML = htmlText;
var fieldsArea = document.getElementById('new_field');
fieldsArea.appendChild(newElement);
fields += 1;
} else {
alert("Only 10 fields allowed.");
document.form.add.disabled=true;
}
}
</script>
but i need some helps to add new functions for removing field, For any suggest and pointer would be appreciate.

To remove a field you first get a reference to it, such as by having the user click on it or using document.getElementById (in which case you need to make sure each element has a unique id).

Then you can remove it using input_reference.parentNode.removeChild(input_reference);

When deleting interface elements, if they have any events (onclick etc) assigned to them, it can be important to delete all the events first, because of a memory leak in internet explorer.

I have made a simple example that demonstrates the adding and removing of input fields like in your question. It also shows how to remove their events. You can try it out here.

http://webinterfacetricks.com/removing_fields/

The source has more explanation in it. Let me know if you have any questions.

mjs
11-22-2010, 04:22 AM
That code is already broken.

You create all the new elements with the *SAME* id! ILLEGAL! id's should be unique.

Anyway, you don't tell us how the user is supposed to indicate *which* field to remove.

Hi Old Pedant,

I appreciate your corrections, then i try to put unique id:
replace:
newElement.id = 'new_field';
with:
newElement.id = 'new_field'+(fields+1);
this also work with most browsers except IE, actually I don't know that I was correct, need more pointers,

the field to remove it could be from the last one, or it also if possible according on user want.
many thanks

mjs
11-22-2010, 04:35 AM
The source has more explanation in it. Let me know if you have any questions.
I opened Your link, that look work for most browsers, that one my comment about the removing fields process.

there already remove button:

<button onclick="delete_field()" id="removal_button">Remove Field</button>
then after user click remove button that not directly to remove field but user need more click which field need to remove.

I have another idea e.g.

function addRow() {
if (document.all("tblGrid").rows.length == 5) {
return; // already max 5 rows
}
var newRow = document.all("tblGrid").insertRow();
oCell = newRow.insertCell();
oCell.innerHTML = "<input type='text' name='t1'><input type='button' value='Delete' onclick='removeRow(this);'/>";
}
</script>
so the button remove

<input type='button' value='Delete' onclick='removeRow(this);'/>
placed just after new fields, this mean user just need one click to remove field

Thank You

Old Pedant
11-22-2010, 05:13 AM
So long as you understand that this in that removeRow(this) will refer to the <input>. You will need to move up the "tree" of nodes to find the <tr> parent, and then remove that. And then, yes it would work fine.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum