Remove created hidden input when delete is clicked

[hcdarkmage]

If the title is confusing, I hope my explanation clarifies it.

 

I have a JS function that creates a hidden input to store values from the form after the "add" button is clicked. Now, my problem is, what if the customer decides they don't like that value? How can I remove the hidden field after it has been created?

 

Here is the code for the form:

 

<tr id="tbrowOption" style="display:none">
<td valign="top"><? echo $lang['contactform']['fieldoptions'] ?></td>
<td>
	<table border=0 cellpadding=0 cellspacing=0 width=98%>
		<tr>
			<td><input name="optionvalue" id="optionvalue" style="width:160px"> <input type="button" value="<? echo $lang['contactform']['add'] ?>" onclick="addOption(); createhidden();"> <input type=button value="<? echo $lang['contactform']['del'] ?>" onclick="deleteOption()"></td>
		</tr>
		<tr>
			<td><select size=5 name="options1" id="options1" style="width:230px">
				<?php
					if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
						foreach($options as $value){
							echo "<option name=\"options[]\" id=\"options[]\" value=".$value.">".$value."</option>";
						}
					}
				?>
			</select>
			<?php
				if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
					foreach($options as $value){
						echo "<input type=\"hidden\" name=\"options[]\" id=".$value." value=".$value." />";
					}
				}
			?></td>
		</tr>
	</table>
</td>
</tr>

 

And here is the JS code that creates the hidden field and stuff:

function trimString(input) {
var output = input;
while (output.substring(0, 1) == ' ') {
	output = output.substring(1, output.length);
}
while (output.substring(output.length - 1, output.length) == ' ') {
	output = output.substring(0, output.length - 1);
}
return output;
}

function addOption() {
var textbox = document.getElementById('optionvalue');
var listbox = document.getElementById('options1');
var inList = false;
var myText = trimString(textbox.value);
var myOption;

if(myText != '') {
	for(var i=0; i<listbox.options.length; i++) {
		if(myText.toLowerCase() == listbox.options[i].text.toLowerCase()) {
			inList = true;
			break;
		}
	}
	if(!inList) {
		myOption = new Option(myText, myText);
		listbox.options[listbox.options.length] = myOption;
	}
}
}

function createhidden(){ 

var vValue = document.getElementById("optionvalue").value;
var input = document.createElement("input");
if (vValue != '') {
	input.setAttribute("type", "hidden");
	input.setAttribute("name" , "options" + "[]");
	input.setAttribute("value", vValue);
	input.setAttribute("id", vValue);
	document.getElementById("thisform").appendChild(input);
}
}

function deleteOption() {
var listbox = document.getElementById('options1');

for(var i=0; i<listbox.options.length; i++) {
	if(listbox.options[i].selected) {
		listbox.options[i] = null;
	}
}
}

 

Any help or ideas would be appreciative.

[Psycho]

Well, what you are asking is pretty easy, but there are some problems with that code already. Plus, when posting JS problems it is much more helpful to post the "processed" code. When including the pre-processed server-side code it is much more difficult to work with.

 

Some of the problems I see are:

1. Select OPTIONS don't have names, only the SELECT tag has a name.

2. You are using the same id for the options "options[]". You can't use the same ID for more than one element on a page.  You don't need an id for the optinos, so take it out as well.

3. There is a bug. If you don't change the value in the input field and press teh add button multiple times, it creates multiple hidden fields, but doesn't add an additional vlaue to the select list. I modified the function to clear the field after an add.

 

Not entirelysure what you are using all the hidden fields for. But, I think a better approach would be to use a single hidden field and store all the select options as a comma separated list whenever the select list changes. Anyway, here are changes to your current approach

 

<tr id="tbrowOption" style="display:none">
<td valign="top"><? echo $lang['contactform']['fieldoptions'] ?></td>
<td>
	<table border=0 cellpadding=0 cellspacing=0 width=98%>
		<tr>
			<td>
			    <input name="optionvalue" id="optionvalue" style="width:160px">
			    <input type="button" value="<? echo $lang['contactform']['add'] ?>" onclick="addOption();">
			    <input type=button value="<? echo $lang['contactform']['del'] ?>" onclick="deleteOption()">
			</td>
		</tr>
		<tr>
			<td><select size=5 name="options1" id="options1" style="width:230px">
				<?php
					if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
						foreach($options as $value){
							echo "<option value=\"{$value}\">{$value}</option>";
						}
					}
				?>
			</select>
			<?php
				if (($pageaction=="edit" || $pageaction=="update") && $field_id !=""){
					foreach($options as $value){
						echo "<input type=\"hidden\" name=\"options[]\" id=\"{$value}\" value=\"{$value}\" />";
					}
				}
			?></td>
		</tr>
	</table>
</td>
</tr>

 

function trimString(input) {
var output = input;
while (output.substring(0, 1) == ' ') {
	output = output.substring(1, output.length);
}
while (output.substring(output.length - 1, output.length) == ' ') {
	output = output.substring(0, output.length - 1);
}
return output;
}

function addOption() {
var textbox = document.getElementById('optionvalue');
var listbox = document.getElementById('options1');
var inList = false;
textbox.value = trimString(textbox.value);
var myOption;

if(textbox.value == '') { return false; }

for(var i=0; i<listbox.options.length; i++) {
	if(textbox.value.toLowerCase() == listbox.options[i].text.toLowerCase()) {
		textbox.value = '';
		return false;
	}
}

myOption = new Option(textbox.value, textbox.value);
listbox.options[listbox.options.length] = myOption;
createhidden(textbox.value);
textbox.value = '';
return true;
}

function createhidden(vValue)
{
var input = document.createElement("input");
if (vValue != '') {
	input.setAttribute("type", "text");
	input.setAttribute("name" , "options" + "[]");
	input.setAttribute("value", vValue);
	input.setAttribute("id", vValue);
	document.getElementById("thisform").appendChild(input);
}
}

function deleteOption()
{
    var listbox = document.getElementById('options1');
    var listLen = listbox.length;

    for(var i=0; i<listbox.options.length; i++)
    {
        if(listbox.options[i].selected)
        {
            deletehidden(listbox.options[i].value);
            listbox.options[i] = null;
        }
    }
}

function deletehidden(vValue)
{
if(document.getElementById(vValue))
{
	var deleteObj = document.getElementById(vValue);
	deleteObj.parentNode.removeChild(deleteObj);
}
return;
}

 

[hcdarkmage]

I would like to thank you mjdamato, for you have solved a very perplexing situation. As for why there are so many hidden fields, it is because each value in the list is put into a database for users to change and use as they please (this works for a contact form). When I tried doing it with out the createhidden(), it wouldn't save to the database.

 

Anyways, I would like to thank you for helping me with this problem. Everything works great now.

[Psycho]

Well, there is a much simpler solution than creating hidden fields. Change the select list to a multiple select field. Then on submission of the form use JavaScript to select all of the options. Then you don't have to muck around with all these hidden fields.