dynamically remove an input field with button
Posted: Thu Sep 10, 2009 10:54 am
I'm fairly new to dynamically creating forms using javascript and need some help. I'm Using php and SMARTY, but I only need help with the JS.
Note everything in {} is related to SMARTY and not relevent to the problem.
I've created a function that will dynamically add <input fields> horizontally across a <span> each time the user selects an option from a drop down box.
Heres the html:
<select name="tag_type_id" id="tag_type_id" class="textreg" >
<option selected value="0">choose</option>
{section name=ntag loop=$tag_types}
<option value="{$tag_types[ntag].tag_type_id|cat:'.'|cat:$tag_types[ntag].desc}" >{$tag_types[ntag].desc}</option>
{/section}
</select>
<input type="button" class="datareg" value="Add Tag" onclick="addTag('d_tag', document.add_person.tag_type_id.value)" />
JS:
// Add Inputs for tags
function addTag(div, tag_value)
{
var tag_array=tag_value.split(".");
var tag_id = tag_array[0];
var tag_desc = tag_array[1];
var x = document.getElementById(div, tag_id);
if (tag_id > 0) {
globalCnt = globalCnt +1;
x.innerHTML += " <input type='hidden' id='tag_id[]' name='tag_id[]' value='"+tag_id+"' /> "+tag_desc
x.innerHTML += " <a href='#' onclick='removeTag("+div+", "+globalCnt+")'><img src='images/delete.gif' width='15' height='15' alt='delete' border='0'/></a>";
}
}
I'm proud that the AddInput is functioning correctly.
However I have no idea how to dynamically remove the input field created in addTag and then redisplay the results in the div.
The removeTag function is triggered by the dynamically created href that is created in addTag() and each input has it's own delete button...meaning the remove function needs to have the ability to remove each individual input field instead of just the last input field.
Here's a shell of the removeTag function:
// Remove Inputs for tags
function removeTag(div, tag_count)
{
var x = document.getElementById(div, tag_id);
}
Can anyone help?
Note everything in {} is related to SMARTY and not relevent to the problem.
I've created a function that will dynamically add <input fields> horizontally across a <span> each time the user selects an option from a drop down box.
Heres the html:
<select name="tag_type_id" id="tag_type_id" class="textreg" >
<option selected value="0">choose</option>
{section name=ntag loop=$tag_types}
<option value="{$tag_types[ntag].tag_type_id|cat:'.'|cat:$tag_types[ntag].desc}" >{$tag_types[ntag].desc}</option>
{/section}
</select>
<input type="button" class="datareg" value="Add Tag" onclick="addTag('d_tag', document.add_person.tag_type_id.value)" />
JS:
// Add Inputs for tags
function addTag(div, tag_value)
{
var tag_array=tag_value.split(".");
var tag_id = tag_array[0];
var tag_desc = tag_array[1];
var x = document.getElementById(div, tag_id);
if (tag_id > 0) {
globalCnt = globalCnt +1;
x.innerHTML += " <input type='hidden' id='tag_id[]' name='tag_id[]' value='"+tag_id+"' /> "+tag_desc
x.innerHTML += " <a href='#' onclick='removeTag("+div+", "+globalCnt+")'><img src='images/delete.gif' width='15' height='15' alt='delete' border='0'/></a>";
}
}
I'm proud that the AddInput is functioning correctly.
However I have no idea how to dynamically remove the input field created in addTag and then redisplay the results in the div.
The removeTag function is triggered by the dynamically created href that is created in addTag() and each input has it's own delete button...meaning the remove function needs to have the ability to remove each individual input field instead of just the last input field.
Here's a shell of the removeTag function:
// Remove Inputs for tags
function removeTag(div, tag_count)
{
var x = document.getElementById(div, tag_id);
}
Can anyone help?