[RESOLVED] deleting input field & saving values when adding

@kaiser0427Apr 10.2009

I have a form and I want to be able to add additional input fields when a button is clicked. The name of the input field will stay the same because the name creates an array for my PHP code. The following script works, however when you add another field if you have text entered, it adds the field but clears out all text in the added fields.

1. How do I keep those values when you click the add button?

Next I want to be able delete if the user clicks the add button too many times. I know I need to pass the id value to a delete function but…

2. How should the delete function look to achieve this.

Here is the code that works (to add a field) and posts to my database perfectly.

[CODE] function addColorInput() { var id=0; for (id=0; id < 100; id++) { var idName = “id='”; var form = “<input type=’text’ name=’color[]’ id='”+id; var div = document.getElementById(“color”); } div.innerHTML += “<div>Next Color: “+form+”‘<br /><br /></div>”; } [/CODE]

Any advice would be appreciated.

to post a comment

JavaScript

11 Comments(s) _↴

@ZeroKilledApr 10.2009 — #How do I keep those values when you click the add button?[/quote]
you would have to read the value of an existent input and set it to the new one.

Next I want to be able delete if the user clicks the add button too many times.[/quote] in the first place, [url=http://www.w3schools.com/htmldom/default.asp]DOM[/url] is far better than using [b]innerHTML[/b] to update content. specially in your case where you want to "copy" a field and the ability to delete them. start learning about DOM and try something, specially [url=http://www.w3schools.com/dom/dom_node.asp]appending, removing and cloning elements[/url]. you will see how easier is life using DOM than having not.

@kaiser0427authorApr 13.2009 — #thanks zeroKilled, I used DOM and have it working now. thanks for your help. I should have used DOM to begin with. I guess I wasn't thinking at the end of last week. Resolved.

@kaiser0427authorApr 13.2009 — #it's working but not like i want. here is the code i have now to add/delete.

[CODE]
 function addInputField(iname, divName, rdId) {
 var div = document.getElementById(divName);
 var br = document.createElement('p');
 var newinput = createInput("text", iname, rdId);
 div.appendChild(newinput);
 div.appendChild(br);
 div = newinput = null;
 }
 
 function removeInputFields(divName) {
 var div = document.getElementById(divName);
 var child;
 var i = div.childNodes.length - 1;
 child = div.childNodes[i--];
 div.removeChild(child);
 } 
 [/CODE]

i'm trying to put a linebreak (a new 'p') after every input field. my code does that but when i try to remove the input field i have to click the remove button twice (one to remove the p element and one to remove the input element) I want to be able to click once and remove both the p element and the input element. I've tried updating the [CODE]var i = div.childNodes.length - 1;[/CODE] to [CODE]var i = div.childNodes.length - 2;[/CODE] it removes both but it won't remove the last one in the list. what am i doing wrong?

@ZeroKilledApr 13.2009 — #try this code and please, read article [url=https://developer.mozilla.org/En/Whitespace_in_the_DOM]Whitespace in the DOM[/url]. because [b]removeInputField[/b] remove the last child node in the given DIV element, i encourage you not to separate each element in the HTML source code with a space. the article explain it. also, don't use P element to separate content. instead place the field inside P element.

[colorcode=html]

<p><input ... /></p>

[/colorcode]

<i>
 </i>function addInputField(iname, divName, rdId) {
 var div = document.getElementById(divName);
 var p = document.createElement('p');
 var newinput = createInput("text", iname, rdId);
 p.appendChild(newinput);
 div.appendChild(p);
 div = newinput = null;
 }
 
 function removeInputFields(divName) {
 var div = document.getElementById(divName);
 div.removeChild(div.lastChild);
 }

if need more help, post a live link of your document.

@kaiser0427authorApr 13.2009 — #thanks again. on my delete function i was going the long way around. and I did read the article you told me. i stopped using the p element and created a new div (i should have been using the div in the original code since I'm adding a image upload field beside each new input). Plus it will be easier to control the spacing with CSS when I am creating the design.

@kaiser0427authorApr 15.2009 — #i have another question. I'm trying to add file upload fields after the text input field. why can't i just send the type "file" to this function for it to work. I can pass "text" and it adds a text field but not a file field.

[CODE]function addInputField(type, iname, divName, Id) {
 var div = document.getElementById(divName);
 var p = document.createElement('div');
 var newinput = createInput(type, iname, Id);
 p.appendChild(newinput);
 div.appendChild(p);
 div = newinput = null;
 }
 [/CODE]

[code=html]<input name="addColor" type="button" value="Add Color Field" onclick="addInputField('text', 'color[]', 'color', 'color')" />
 <input name="addSwatch" type="button" value="Add Color Image" onclick="addInputField('file', 'colorFile[]', 'upload', 'swatch')" />
 [/code]

the first button works fine but the 2nd wont. The 2nd will work if i change 'file' to 'text'

I'm puzzled.

@ZeroKilledApr 15.2009 — #what the function [b]createInput[/b] look like? [b]createInput[/b] isn't a standard function, so i'm not able to answer your question because i has never seen such function.

@kaiser0427authorApr 15.2009 — #here is the other functions

[CODE]var isIE = (document.all && document.selection && window.ActiveXObject && document.getElementById) ? true : false;
 function createElement(nodeName, name) {
 var el;
 if (!document.createElement)
 return null;
 if (isIE) {
 el = document.createElement('<'+nodeName+' name="'+name+'">');
 } else {
 el = document.createElement(nodeName);
 el.name = name;
 }
 return el;
 }
 
 function createInput(type, name,itemName, value, divName) {
 var input = createElement("input", type, name);
 value = "enter your next "+itemName;
 if (!input)
 return null;
 input.type = type;
 input.value = value;
 return input;
 }
 [/CODE]

@ZeroKilledApr 15.2009 — #the problem is quite clear. when you call this line [b] var input = createElement("input", type, name);[/b] you never are setting the type of input. this is how the function definition look like, notice specifically the bold code.

<i>
 </i>function createElement([B]nodeName, name[/B]) {
 ...
 if (isIE) {
 el = document.createElement('&lt;'+nodeName+' [B]name="'+name[/B]+'"&gt;');

in your call you are passing the type but function use it as the name for the element. also, the function only accept two arguments, not three. this is how you should have defined the function [B]createInput[/B]:

<i>
 </i>function createInput(type, name,itemName, value, divName) {
 var input = createElement("input", name);
 input.type = type;

it is true that in msie browser isn't possible to change the type of an input. however, i recently discovered that is true when the element is appended in the document. so, you can change the type before appending to document. tried in msie7 and worked for me. can't test on older version.

@kaiser0427authorApr 15.2009 — #once again... many thanks, ZeroKilled.

Just a note to anyone looking at this script you can't pass a value to a "file" type. If you do you will get a NS_ERROR_DOM_SECURITY_ERR message.

@kaiser0427authorApr 15.2009 — #just wanted to post the final code to help others looking to add an input field and a upload field with the click of a button

[CODE]var isIE = (document.all && document.selection && window.ActiveXObject && document.getElementById) ? true : false;
 function createElement(nodeName, name, type) {
 var el;
 if (!document.createElement)
 return null;
 if (isIE) {
 el = document.createElement('<'+nodeName+' name="'+name+'">'+' type="'+type+'">');
 } else {
 el = document.createElement(nodeName);
 el.name = name;
 el.type = type;
 }
 return el;
 }
 
 function createInput(type, name, Id, value) {
 var input = createElement("input", name, type);
 value = "enter your next "+ Id;
 if (!input)
 return null;
 input.type = type;
 input.value = value;
 return input;
 }
 function addInputField(name, divName, Id, type) {
 var div = document.getElementById(divName);
 var p = document.createElement('div');
 var newinput = createInput(type, name, Id)
 var newupload = createUpload('file', 'colorFile[]', Id);
 p.appendChild(newinput);
 div.appendChild(p);
 p.appendChild(newupload);
 div.appendChild(p);
 }
 function removeInputFields(divName) {
 var div = document.getElementById(divName);
 div.removeChild(div.lastChild);
 }
 function createUpload(type, name, Id) {
 var input = createElement("input", name, type);
 if (!input)
 return null;
 input.type = type;
 return input;
 }[/CODE]

Also in #JavaScript _↴

help needed with bookmarking script How to reload specific div with jquery?how to manage file in javascript

Success!

Help @kaiser0427 spread the word by sharing this article on Twitter...

Tweet This

[RESOLVED] deleting input field & saving values when adding

11 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

[RESOLVED] deleting input field & saving values when adding

11 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

11 Comments(s) _↴

Also in #JavaScript _↴