Adding a value from an inputbox into combo box

jason_kelly · 01-24-2013, 05:09 PM

Hello,

I need your guys help,

Using javascript,

What i'd like to do is when I type a value into the inputbox and I hit my enter key (in the textbox only) i'd like to have the value of the inputbox be added into the drop down box.

Note that if there is an existing value in the already in the drop down box, the next value should just be added below the existing value.

How do I set this up?

Here is the html setup:

Code:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<input type="text" id="theinput" style="width: 100px;">

<select id="thebox" style="width: 100px;"></select>

</body>

</html>

Much thanks and appreciation for all your help and support.

Cheers,

Jay

WolfShade · 01-24-2013, 05:13 PM

Google "javascript new option" (and be sure to use the additional search tools to specify "within last year").

UPDATE: This tutorial is helpful.

Philip M · 01-24-2013, 06:01 PM

Here you are:-

Code:

<form id = "myform">
<input type = "text" onblur = "addOption(this.value)">

<select name = "listBox1" id = "listBox1">
<option value = "">First Value If Desired</option>
</select>
</form>

<script type = "text/javascript">

function addOption(txt) {
var s = document.getElementById('listBox1');
var opt = new Option(txt);

for (var i = 0; i<s.options.length; i++) {
var xtext = document.getElementById("myform").listBox1[i].text; 
if (txt == xtext) {
alert ("You have already added this value to the select box")
return false;
}
}
s.options[s.options.length] = opt;
return true;
} 

</script>

You should know that the default behaviour of hitting the Enter key is to transfer the focus to the next following field.

Samson slayed the Philistines with the axe of the apostles
- Pupil's answer to Catholic Elementary School test.

jason_kelly · 01-24-2013, 07:44 PM

Thanks very much Phil.

Flawless

felgall · 01-24-2013, 09:13 PM

Note that a select list is NOT a combo box. With a combo box the person doesn't have to select a value from the list, they can type in their own value instead. Combo boxes are available in HTML 5.

Old Pedant · 01-24-2013, 10:05 PM

I've been preaching "<select> is not a combo box" for at least 14 years. It hasn't helped. And of course now that HTML 5 really has combo boxes, we'll never manage to get people to keep them straight.