Hi all
I have a pretty cool script which, on the click of a button, sticks in a extra text box and gives it a unique name/id so it can be munipulated and sent through on a form.
Problem is, I dont know how to remove a text box when added, simplistic terms - a script to reverse what the add button does.
Here's a simple break down of the code... - <script type="text/javascript">
-
<!--
-
function addField(area,field,limit) {
-
-
var field_area = document.getElementById(area);
-
var all_inputs = field_area.getElementsByTagName("input");
-
-
var last_item = all_inputs.length - 1;
-
var last = all_inputs[last_item].id;
-
var count = Number(last.split("_")[1]) + 1;
-
-
if(count > limit && limit > 0) return;
-
-
if(document.createElement) {
-
var li = document.createElement("li");
-
var input = document.createElement("input");
-
input.id = field+count;
-
input.name = field+count;
-
input.type = "text"; 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>";
-
}
-
}
-
-
//-->
-
</script>
[HTML]</head>
<body>
<form name="frm" method="POST">
<strong>Frien ds List</strong><br />
<ol id="friends_are a">
<li><input type="text" name="friend_1" id="friend_1" /></li>
<li><input type="text" name="friend_2" id="friend_2" /></li>
<li><input type="text" name="friend_3" id="friend_3" /></li>
<li><input type="text" name="friend_4" id="friend_4" /></li>
<li><input type="text" name="friend_5" id="friend_5" /></li>
</ol>
<input type="button" value="Add Friend Field" onclick="addFie ld('friends_are a','friend_',15 );" />
</form>
</body>
</html>[/HTML]
Any suggestions how to remove a field????
Regards
9  2391 
I wonder if you have you tested this code with I.E., which has a problem creating input fields in the conventional way? If adding to existing fileds, it would be better to use . cloneNode.
The innerHTML branch is pointless since it doesn't represent an 'older method' and if document.create Element isn't supported, neither will innerHTML . -
input.type = "text"; text,file,checkbox etc.
-
That must cause an error.
If you append a property to field_area, holding either a reference to the last field created or its ID, it would be easy for a removal function to identify it.
hsriat 1,654
Recognized Expert Top Contributor
Try this... - function removeField(listId) {
-
var toBeRemoved = document.getElementById(listId).lastChild;
-
toBeRemoved.parentNode.removeChild(toBeRemoved);
-
}
[html]<input type="button" value="Remove Friend Field" onclick="remove Field('friends_ area');" />[/html]
I wonder if you have you tested this code with I.E., which has a problem creating input fields in the conventional way? If adding to existing fileds, it would be better to use .cloneNode.
The innerHTML branch is pointless since it doesn't represent an 'older method' and if document.create Element isn't supported, neither will innerHTML .
That must cause an error.
If you append a property to field_area, holding either a reference to the last field created or its ID, it would be easy for a removal function to identify it.
You are correct.. l removed the // just before the word text - only in my post though.
Try this... - function removeField(listId) {
-
var toBeRemoved = document.getElementById(listId).lastChild;
-
toBeRemoved.parentNode.removeChild(toBeRemoved);
-
}
[html]<input type="button" value="Remove Friend Field" onclick="remove Field('friends_ area');" />[/html]
Brilliant!! This works a treat!!! Is was throwing up an 'object required' error for a bit - until I figured out the typo [HTML]onclick="remove Field('friends_ area');" />[/HTML] it did not require the 's' in friends_area.
One small problem though, this will actually allow the user to remove all fields, I would like it to leave at least one field on there - otherwise after deleting all fields it will not allow you to add a field again.
Thanks for your help!!
hsriat 1,654
Recognized Expert Top Contributor - function removeField(listId) {
-
var toBeRemoved = document.getElementById(listId).lastChild;
-
if (!toBeRemoved.previousSibling) return;
-
toBeRemoved.parentNode.removeChild(toBeRemoved);
-
}
it did not require the 's' in friends_area.
Could not understand the reason...
- function removeField(listId) {
-
var toBeRemoved = document.getElementById(listId).lastChild;
-
if (!toBeRemoved.previousSibling) return;
-
toBeRemoved.parentNode.removeChild(toBeRemoved);
-
}
Could not understand the reason...
That works a treat. Many thanks for your speedy and reliable help hsriat.
Kind regrds
hsriat 1,654
Recognized Expert Top Contributor
That works a treat. Many thanks for your speedy and reliable help hsriat.
Kind regrds
You are welcome
Regards,
Harpreet
You are welcome
Regards,
Harpreet
Ok, it's me again....
I just want to enhance this slightly, and I think this may be quite simple.
I want to add some span tags to the end of each line, as below:
[HTML]<ol id="friend_area ">
<li><input type="text" name="friend_1" id="friend_1" /></li><span id ="1"></span>
<li><input type="text" name="friend_2" id="friend_2" /></li><span id ="2"></span>
<li><input type="text" name="friend_3" id="friend_3" /></li><span id ="3"></span>
<li><input type="text" name="friend_4" id="friend_4" /></li><span id ="4"></span>
<li><input type="text" name="friend_5" id="friend_5" /></li><span id ="5"></span>
</ol>[/HTML]
Is it easy enough to get the function which adds a line to add a span tag to each new line - I'm guessing the number is already generated in the code so it's just a case of adding the span and number into the - field_area.innerHTML += "<li><input name='"+(field+count)+"' id='"+(field+count)+"' type='text' /></li>";
line??
hsriat 1,654
Recognized Expert Top Contributor
Don't keep the span tag outside li. Keep it within the li instead. - field_area.innerHTML += '<li><input name="'+(field+count)+'" id="'+(field+count)+'" type="text" /><span id="'+count+'"></span></li>';
Sign in to post your reply or Sign up for a free account.
Similar topics | |
by: Ken |
last post by:
I am trying to create one image using JavaScript; then later in the script
remove the image - not just remove the src.
The following creates the image, but I have been unable to remove it.
How do I structure
document.getElementById('num1').removeChild(image_display); ?
<input type=file name="picture1" onChange="image(this.value, 'num1');"
Id="pt1">
<div id='num1'></div>
|
by: baustin75 |
last post by:
Posted: Mon Oct 03, 2005 1:41 pm Post subject: cannot mail() in ie
only when debugging in php designer 2005
--------------------------------------------------------------------------------
Hello,
I have a very simple problem but cannot seem to figure it out. I have a
very simple php script that sends a test email to myself. When I debug
it in PHP designer, it works with no problems, I get the test email. If
|
by: Stu Carter |
last post by:
Hi,
I have an aspx page where some controls are initially disabled by the
code-behind 'Page_Load' event. I want these controls to be dynamically
enabled when the user checks a checkbox. Because I don't want a post-back,
I added some javascript to do this
However, using client-side JS, I cannot enable any controls that have been
disabled by server-side code. If the control is initially enabled, I can
disable/enable it client-side.
|
by: djc |
last post by:
On the page_load event I am querying a database and binding data to some
text boxes, list boxes, and a repeater control. When the page loads it uses
the value of one of the database fields (status) to determine what options
should be available for this particular item (which is an issue... small
issue tracking system). Each of these options is an action that may be
performed on the issue and I am dynamically creating LinkButtons for each...
|
by: Samuel |
last post by:
Hi,
I am building a page that makes use of user control as a templating
technique. The following is that I have in mind and it is actually working:
Root/
-- login.aspx
-- login.aspx.vb
-- UC/
----- Classic/
| | |
by: Aaron Smith |
last post by:
Ok. I have a dataset that has multiple tables in it. In one of the child
tables, I have a column that I added to the DataSet (Not in the
DataSource). This column does not need to be stored in the data on the
datasource. It simply gets the first name and last name of an instructor
and displays it in the grid. I have two major problems.... One, it
doesn't display in the column until the row is saved, (Even after
calling a refresh on the...
|
by: stellstarin |
last post by:
I have a html where fields are created and added dynamically on the
client side. I use the
AppendChild() call to create fields dynamically.
On submit i try to get the value for all the elements in the form,
including those that are added
dynamically. I use document.getElementsByName('Field Name')to achieve
the same.
|
by: Tereska |
last post by:
I want to delete script added before.
I'm adding script dynamically and i'm removing later.
Why it is still working?
I have something like this:
<html>
<head>
<title>JS Script Remove</title>
</head>
|
by: karinmorena |
last post by:
I'm having 4 errors, I'm very new at this and I would appreciate your input. The error I get is:
Week5MortgageGUI.java:151:cannot find symbol
symbol: method allInterest(double,double,double)
Location: class Week5MortgageGUI
Week5MortgageLogic allint = logic.allInterest(amount, term, rate);
Week5MortgageGUI.java:152:cannot find symbol
symbol: method allInterest(double,double,double)
Location: class Week5MortgageGUI
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed.
This is as boiled down as I can make it.
Here is my compilation command:
g++-12 -std=c++20 -Wnarrowing bit_field.cpp
Here is the code in...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: tracyyun |
last post by:
Dear forum friends,
With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
| | |
by: bsmnconsultancy |
last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...
| |
