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?
dynamically remove an input field with button
Moderator: General Moderators
- Christopher
- Site Administrator
- Posts: 13596
- Joined: Wed Aug 25, 2004 7:54 pm
- Location: New York, NY, US
Re: dynamically remove an input field with button
Looks like you are missing a semicolon at the end of a line in addTag().
(#10850)
Re: dynamically remove an input field with button onclick
Thanks arborint!
I actually just resolved the issue.
It's kind of clunky but the data can be $_POSTED and stored in the database once the user hits submit. I'll post the code here to see if someone can see a more efficient way to do this, but test out your suggestion before posting your solution. I tried a number of more logical ideas but this was the only way I could get it to work.
Again...what I'm doing is adding a <input> tag horizontally within a <span> whenever the user selects an option from a dropdown menu and hits a button (not submit).
HTML (Contains SMARTY tags, which you can ignore):
<td width="80%">
<span class="headingreg" colspan="2">tags: </span>
<span class="textreg" colspan="2">
<span id="d_tag"></span>
<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)" />
</span>
</td>
Javascript functions: requires globalCnt to be set to 0 at the top of the script
// 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) {
x.innerHTML += " <input id='tag_id["+globalCnt+"]' name='tag_id["+globalCnt+"]' type='hidden' value="+tag_id+" > "+tag_desc
x.innerHTML += " <A href='#' onclick='removeTag("+globalCnt+")'><img src='images/delete.gif' width='15' height='15' alt='delete' border='0'/></A>";
globalCnt = globalCnt +1;
//alert ("ADD"+x.innerHTML);
}
}
// Remove Inputs for tags
function removeTag(iteration)
{
// retrieve the inputs between <span id='d_tag'></span>
x = document.getElementById('d_tag').innerHTML;
var y = "";
j = 0;
// divide the inputs into an array
var xArray = x.split("</A>");
// re-create inputs, omitting the deleted input
for(i = 0; i < xArray.length-1; i++) {
if (i != iteration) {
z = (xArray);
// starting points
id = z.indexOf("[");
nm = z.lastIndexOf("[");
dif = nm - id;
rem = z.lastIndexOf("(");
dif2 = rem - (nm+2);
// debug alerts
//alert ("id = "+id+" nm = "+nm+" diff = "+dif);
//it_id = z.charAt(id+1);
//it_nm = z.charAt(nm+1);
//it_rem = z.charAt(rem);
// build the new input array iteration
ver_a = z.substr(0,id+1);
ver_b = z.substr(id+2, dif-1);
ver_c = z.substr(nm+2, dif2+1)
ver_d = z.substr(rem+2);
ver_final = ver_a+j+ver_b+j+ver_c+j+ver_d;
//alert (ver_final);
if (i == xArray.length-1) {
y += ver_final;
} else {
y += (ver_final + '</A>');
}
j=j+1;
}
}
//alert(y);
globalCnt = j;
document.getElementById('d_tag').innerHTML = y;
}
I actually just resolved the issue.
It's kind of clunky but the data can be $_POSTED and stored in the database once the user hits submit. I'll post the code here to see if someone can see a more efficient way to do this, but test out your suggestion before posting your solution. I tried a number of more logical ideas but this was the only way I could get it to work.
Again...what I'm doing is adding a <input> tag horizontally within a <span> whenever the user selects an option from a dropdown menu and hits a button (not submit).
HTML (Contains SMARTY tags, which you can ignore):
<td width="80%">
<span class="headingreg" colspan="2">tags: </span>
<span class="textreg" colspan="2">
<span id="d_tag"></span>
<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)" />
</span>
</td>
Javascript functions: requires globalCnt to be set to 0 at the top of the script
// 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) {
x.innerHTML += " <input id='tag_id["+globalCnt+"]' name='tag_id["+globalCnt+"]' type='hidden' value="+tag_id+" > "+tag_desc
x.innerHTML += " <A href='#' onclick='removeTag("+globalCnt+")'><img src='images/delete.gif' width='15' height='15' alt='delete' border='0'/></A>";
globalCnt = globalCnt +1;
//alert ("ADD"+x.innerHTML);
}
}
// Remove Inputs for tags
function removeTag(iteration)
{
// retrieve the inputs between <span id='d_tag'></span>
x = document.getElementById('d_tag').innerHTML;
var y = "";
j = 0;
// divide the inputs into an array
var xArray = x.split("</A>");
// re-create inputs, omitting the deleted input
for(i = 0; i < xArray.length-1; i++) {
if (i != iteration) {
z = (xArray);
// starting points
id = z.indexOf("[");
nm = z.lastIndexOf("[");
dif = nm - id;
rem = z.lastIndexOf("(");
dif2 = rem - (nm+2);
// debug alerts
//alert ("id = "+id+" nm = "+nm+" diff = "+dif);
//it_id = z.charAt(id+1);
//it_nm = z.charAt(nm+1);
//it_rem = z.charAt(rem);
// build the new input array iteration
ver_a = z.substr(0,id+1);
ver_b = z.substr(id+2, dif-1);
ver_c = z.substr(nm+2, dif2+1)
ver_d = z.substr(rem+2);
ver_final = ver_a+j+ver_b+j+ver_c+j+ver_d;
//alert (ver_final);
if (i == xArray.length-1) {
y += ver_final;
} else {
y += (ver_final + '</A>');
}
j=j+1;
}
}
//alert(y);
globalCnt = j;
document.getElementById('d_tag').innerHTML = y;
}