function setTextInputs(Select) {
//alert(’hai’);
var howmany = Select[Select.selectedIndex].value, add = true;
alert(howmany);
var n = 1, Form = Select.form, Div, Input;

while (Div = document.getElementById(’Pin’ + n))

if (n++ > howmany) {
add = false;
Form.removeChild(Div);
}
if (add)
for (n; n <= howmany; ++n) {
Div = document.createElement(’div’);
Div.setAttribute(’id’, ‘Pin’ + n);
Div.className = ‘inputbox’;
Div.appendChild(document.createTextNode(’Pin’ + n + ‘: ‘));
Form.appendChild(Div);

Input = document.createElement(’input’);
Input.setAttribute(’type’, ‘text’);
Input.setAttribute(’name’, ‘Pin’ + n);
Div.appendChild(Input);
document.getElementById(’one’).appendChild(Div);
}

}

var third_counter = 1;
function adduniversity(divName){
var newdiv = document.createElement(’div’);
newdiv.innerHTML = “university fieldremove“;
document.getElementById(divName).appendChild(newdiv);
third_counter++;
}

and my remove function is:

function removeElement(parentDiv, childDiv){
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
third_counter–;
}

var stack=new Array();
var olTag=document.createElement(’ol’);
function pushStack()//WARAY SEMICOLON…… push
{
if(stack.length<=10)
{
var item = document.getElementById(”output”).value;
stack.reverse().push(item);
//alert(stack.reverse());
}
else
{
alert(”10 is the Miaximum Entry”)
return item
}
}

function listshow(thelist)
{
var listTag=document.createElement(’list’);
for (var i = 0; i < stack.length; i++)
{
if(stack.length<=10)
{
//stack.splice(1,2);
var liTag=document.createElement(’li’);
txtNode=document.createTextNode(stack[i]);

}
}
olTag.appendChild(liTag);
liTag.appendChild(txtNode);
listTag.appendChild(olTag);
document.childNodes[0].childNodes[1].appendChild(olTag).style.margin = “30 525px”;//append in the HTM document
}

function popStack()//pop……..
{
var popVal = stack.pop();
var li = document.getElementsByTagName(’li’);
li[0].parentNode.removeChild(li[0-0]);
if (popVal == undefined)
return “Nothing left!”;
else
return popVal;
}

function trial()
{
document.getElementById(”output”).value = “”;
}
function back()
{
document.getElementById(”output”).value = item;
}
window.onload=function(){
document.getElementById(”output”).addEventListener(’click’,trial,false);
document.getElementById(”output”).addEventListener(’blur’,back,false);
}

First Come First Serve

Thanks for posting your solution. I hope that it will help many others who come to this site =)

My PHP/mySQL technique is out of date and isnt the best method, but my point is to show the add/remove.

http://pastebin.com/f47d4daf

Or, for simplified code of JUST the javascript and form, without a complete implementation:

http://pastebin.com/f76c7c0c2

I eventually went on to another solution altogether, that does work harmoniously with both adding and removing elements.

http://pastebin.com/f76c7c0c2

Or for a full example, with PHP/mySQL incorporated to prepopulate the form:

http://pastebin.com/f47d4daf

Please note that I didn’t do everything in the best way. I query the database using a deprecated method (I think), and see the note at the top of the code for why my method of updating the form isnt the best. But it DOES work, and my point is to show a fully working example of dynamically adding and removing fields, not of proper PHP/mySQL technique.

thank you

http://pastebin.com/m44815314

This does not seem to be an issue with quotes since the code you have given me looks. I would make sure that all the variables are valid by doing a simple alert on them. Also, you might want to move the “Gcounter++” line to the first line in the function so you do not have to do the “(Gcounter + 1)” in that second line of the function.

I do not see genreInput anywhere being used in the function so you might want to make sure you have used the correct variable names.

I hope this helps.

http://pastebin.com/m79f0ba63

function addGenre(genreHTML,divName){

var newdiv = document.createElement(’div’);
newdiv.innerHTML = “Genre ” + (Gcounter + 1) + ” : ” + genreHTML + ” “;
document.getElementById(divName).appendChild(newdiv);
Gcounter++;

}

genreHTML is a php-generated list of ’s.
genreInput is the parentDiv.

I’ve tried every combination of single quotes, double quotes, and escaping that I can think of. It returns javascript errors of either invalid arguments or syntax, depending on the quotes used.

Any help?

I have now got both the add and remove scripts working, and added counter– to the remove script so that I could add and remove form fields without hitting the limit. I am very happy with myself, your scripts got me to learn something, so thank you!

I’m glad you were able to resolve this on your own. Yea, keeping track of quotes within quotes within quotes can be a really tricky thing!

onClick=’removeElement(\”dynamicInput\”, \”email” + (counter+1) + “\”);’ />

My problem is that I don’t know what to replace single quoutes with. I can see that double quotes get replaced with a single quote, but what about single quotes? Any help would be really appreciated.

Here is my code:

var counter = 1;
var limit = 10;
function addInput(divName){
if (counter == limit) {
alert(”You have reached the limit of adding ” + counter + ” inputs”);
}
else {
var newdiv = document.createElement(’div’);
newdiv.setAttribute(’id’,'email’ + (counter + 1));
newdiv.innerHTML = “Email ” + (counter + 1) + ” “;
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
function removeElement(parentDiv, childDiv){
if (childDiv == parentDiv) {
alert(”The parent div cannot be removed.”);
}
else if (document.getElementById(childDiv)) {
var child = document.getElementById(childDiv);
var parent = document.getElementById(parentDiv);
parent.removeChild(child);
}
else {
alert(”Child div has already been removed or does not exist.”);
return false;
}
}

I noticed a mistake in my edit and edited the link. Please refer to the new link.

Thanks.

I think the problem is that you did not indicate an ID for the created child element. Once you place the ID in there, which is created dynamically using the counter variable, you can also use that same ID for the input button that is used for removing it.

http://pastebin.com/m60464aaa

I have not tested it but I hope the basic idea is there.

I’ve pasted it in pastebin: http://pastebin.com/m1cf0ba22

It’s the first highlighted line. You responded in your other article about dynamic creation that the ID was already available but I’m just not making the logical gap.

Any thoughts would be greatly appreciated.