ansaurus

Question

How to make HTML combo box save values added by user in textbox?

Answer 1

A:

To store values permanently, you need to write server-side code and store them in either a file or database (or if you want to show them for the specific user who inputted it, you do not need to store them, just send back).
You can get the current number of options with form.select.length

bazmegakapa 2010-10-15 07:35:42

XCeptable 2010-10-15 08:28:02

If you generate your HTML with for example PHP, you might not need the first step (onformload/onchange as you said).

bazmegakapa 2010-10-15 08:41:11

Answer 2

A:

To permanently add you need a server-side script.

To temporarily add you can use javascript:

function addVal(newVal) {
  var sel = document.getElementById('select');
  var opt = document.createElement("OPTION");

  sel.addChildNode(opt);
  opt.innerHTML = newVal;
  opt.value = newVal; //(alternatively)
}

To count the number of options:

function countOpts() {
  var sel document.getElementById('select');
  return sel.options.length;
}

(only for conceptual use, not tested as functional)

Steve 2010-10-15 07:44:57

I tried your code Steve it did not work,I adopted it to my form. Here is what I did, " function AddListItem(form){var TestVar = form.txtInput.value;form.txtInput.value = "";var sel = form.select;//var count = sel.options.length;var opt = form.createElement("OPTION");sel.addChildNode(opt);opt.innerHTML = TestVar;opt.value = TestVar;//form.select.options[count]=new Option(TestVar, TestVar, true);}" What I understood from ur code is it creates child nodes for one session

XCeptable 2010-10-18 08:17:54

If I do it this way, it works but all newly added options are vanished when page is refreshed. " function AddListItem(form){var count = form.select.options.length;var TestVar = form.txtInput.value;form.txtInput.value = "";form.select.options[count]=new Option(TestVar, TestVar, true);} "

XCeptable 2010-10-18 08:20:07

Comment 1 - not the session, just the current instance of the window. Comment 2 - Yep, that's the temporary thing working against you. See my reply below.

Steve 2010-10-18 08:37:21

Answer 3

A:

You add an <option> dynamically like this:

function add(selectId, optText, optValue)
{
    var newOption = document.createElement("option") 
    newOption.text = optText;
    newOption.value = optValue;
    document.getElementById(selectId).options.add(newOption);
}

selectId is the id of <select>, optText is the text to be displayed in the dropdown and optValue is the value that will be sumbitted to the server.

For your code, call it as

<input id='txtInput' type='text' maxlength = "5" size="5" ondblclick="add('select', this.value, this.value)"/>

As you see, you don't really need to find the length of the options, but you can do it via options.length:

document.getElementById(selectId).options.length;

That said,

You might want to add this to the dropdown, as well as to pass to the server, to add to some table, for instance. You might have to do that call via AJAX, when you add it to the dropdown
Adding the new item on double click of the textbox is not very usable. On blur might be an option. Better is an 'Add' button after the textbox .

Nivas 2010-10-15 07:45:18

XCeptable 2010-10-18 09:53:45

Answer 4

A:

Sounds like you need a server-side script then. When you submit the form, you can have a field that is 'remembering' all of the dropdown options:

The simplified HTML:

<form method='post' action=''>
  <input name='newDDoption' />
  <input type='hidden' name='ddStorage' value='<?PHP echo implode("|||",$ddOptions); ?>' />
  <button>GO</button>
</form>

The simplified PHP:

<?PHP
$ddOptions = explode("|||",$_POST['ddStorage']);
$ddOptions[] = $_POST['newDDoption'];

echo "<select>";
for($x=0;$x<count($ddOptions);$x++) {
  echo "<option>".$ddOptions[$x]."</option>";
}
echo "</select>";
?>

To explain: PHP saves the ddOptions in the form -> User enters new option -> The form is submitted -> PHP finds the stored values -> PHP pushes on the new value -> PHP loops through and creates your permanent dropdown menu.

Steve 2010-10-18 08:42:55

ansaurus

tags:

views:

answers:

How to make HTML combo box save values added by user in textbox?

related questions