Run a function once an option is selected

[lurtnowski]

I have a function

function reload(form)
{
var val=form.manufacturer.options[form.manufacturer.options.selectedIndex].value;
self.location='show_rack.php?id=<?=$rack_id?>&manufacturer=' + val + '#add_asset';
}

Im trying to run it once an input is made into an input box

<input list="manufacturers" name="manufacturer" type="text" class="form-control" onkeyup="reload(this.form)">

<datalist id="manufacturers"><option value="ADDER">ADDER</option>
<option value="APC">APC</option>
<option value="Apex">Apex</option>
<option value="Aten">Aten</option>
...
</datalist>

but this doesn’t seem to work.

[Martyr2]

Datalists don’t have a selectedIndex method, they are not like select elements. Just get the value from the input instead. The value returned will be whatever the user types in, or whatever they select from the datalist.

function reload(form)
{
var val=form.manufacturer.value;
self.location='show_rack.php?id=<?=$rack_id?>&manufacturer=' + val + '#add_asset';
}

Now of course this will send the user as soon as they type anything… which is probably not what you want. I suggest you use an actual select element and then you can use selectedIndex (probably with an onchange event). But again the datalist is a data source that the input uses for auto completion and is not a form element in your traditional sense. So it doesn’t support the selectedIndex that you are probably use to with actual select form elements.

[m_hutley]

(Also, what happens if I type in “ZZZ” to your form? Needs some validation.)