dynamically adding and deleting input boxes

[shifter480]

Hi,

I currently have some JS that allows me to dynamically add input boxes. Once submitted each dynamically added box value is added to an array.

I want to add a button that will allow me to delete the last dynamically added box.

Here is my attempt

<script language="javascript" type="text/javascript" defer>

// This function will dynamically add level fields to the form.
var counter = 1;
var limit = 10;
function addInput(divName)
{
if (counter == limit)
{
alert("You have reached the limit of adding " + counter + " inputs");
}
else
{
counter++;
var newdiv = document.createElement('div' + (counter));
newdiv.innerHTML = "<label>Level"+ (counter)+ ": *</label><input type='text' name='levels[]'>";
document.getElementById(divName).appendChild(newdiv);
}
}
function remove(id)
{
return (elem=document.getElementById(id)).parentNode.removeChild(elem);
}
function removeInput(divName)
{
if (counter > 1)
{
remove('div' + (counter));
--counter;
}
}
</script>


The HTML buttons:

<hr/>
<div id="dynamicRemove">
<input type="button" value="Remove level" onClick="removeInput('dynamicRemove');">
</div>
<div id="dynamicInput">
<label>Level1: *</label> <input type="text" name="levels[]">
<input type="button" value="Add level" onClick="addInput('dynamicInput');">
</div>
<hr/>

The adding works but the remove doesn't. Any ideas would be much appreciated.

Thanks

 

[shifter480]

Apologies -
Line: var newdiv = document.createElement('div' + (counter));

should be
var newdiv = document.createElement('div');

 

[feherke]

Hi

This works in Gecko, Presto and WebKit. May fail in Trident, not tested.

[b]function[/b] [COLOR=darkgoldenrod]removeInput[/color][teal]([/teal]divName[teal])[/teal]
[teal]{[/teal]
     [b]if[/b] [teal]([/teal]counter [teal]>[/teal] [purple]1[/purple][teal])[/teal]
     [teal]{[/teal]
          document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'dynamicInput'[/i][/green][teal]).[/teal][COLOR=darkgoldenrod]removeChild[/color][teal]([/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'dynamicInput'[/i][/green][teal]).[/teal]lastChild[teal])[/teal]
          [teal]--[/teal]counter[teal];[/teal]
     [teal]}[/teal]
[teal]}[/teal]

I kept the change simple, feel free to optimize it.

Note that testing the counter's value will not stop people adding more that 10 [tt]input[/tt]s. So hopefully you are checking that server-side too.


Feherke.

 

[shifter480]

Ah yes that works! Thank you very much.

The limit of 10 was just me messing around. Not checked server side as it is not important but a good point regardless!

Much appreciated.
Joe