I have a form where the user can make an "instant search" with ajax, and the search result are shown as "select... option" tags, when the user choose an option, it's value will populate a text field. The "simplified" version of the code is this:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="2413">2413 - Name A</option>
        <option value="2414">2414 - Name B</option>
        <option value="2415">2415 - Name C</option>
    </select>
</form>

You can also check it on line: /

Now, I need to get TWO values for each option select, like this:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="['Name A', '2413']">2413 - Name A</option>
        <option value="['Name B', '2414']">2414 - Name B</option>
        <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

But I don't know how to get the array values and populate the two fields one with Code and the other with Name.

Online: /

I tried since now to change

form1.elements['Code'].value = this.options[this.selectedIndex].value

to

form1.elements['Code'].value = this.options[this.selectedIndex].value[0]

and to

form1.elements['Code'].value = this.options[this.selectedIndex[0]].value

but with no luck.

Thanks for any help.

I have a form where the user can make an "instant search" with ajax, and the search result are shown as "select... option" tags, when the user choose an option, it's value will populate a text field. The "simplified" version of the code is this:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="2413">2413 - Name A</option>
        <option value="2414">2414 - Name B</option>
        <option value="2415">2415 - Name C</option>
    </select>
</form>

You can also check it on line: http://jsfiddle.net/BCXfQ/

Now, I need to get TWO values for each option select, like this:

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="form1.elements['Code'].value = this.options[this.selectedIndex].value;">
        <option value="['Name A', '2413']">2413 - Name A</option>
        <option value="['Name B', '2414']">2414 - Name B</option>
        <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

But I don't know how to get the array values and populate the two fields one with Code and the other with Name.

Online: http://jsfiddle.net/zm3nX/

I tried since now to change

form1.elements['Code'].value = this.options[this.selectedIndex].value

to

form1.elements['Code'].value = this.options[this.selectedIndex].value[0]

and to

form1.elements['Code'].value = this.options[this.selectedIndex[0]].value

but with no luck.

Thanks for any help.

• javascript
• html

• BTW, form1.elements['Code'].value = this.options[this.selectedIndex].value; can be this.form.Code.value = this.value. – RobG Commented Apr 2, 2013 at 9:04

5 Answers 5

Have you considered using data attributes instead?

Code: <input type="text" id="foo-code" name="Code" value="" size="32" readonly="readonly" /> <br />
Name: <input type="text" id="foo-name" name="Name" value="" size="32" readonly="readonly" /> <br />
<select class="paselect" id="foo-list">
  <option data-name="Name A" data-code="2413">2413 - Name A</option>
  <option data-name="Name B" data-code="2413">2413 - Name B</option>
  <option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>

and glue things together:

var select = document.getElementById("foo-list");
var code = document.getElementById("foo-code");
var name = document.getElementById("foo-name");
select.addEventListener('change', function(event) {
  code.value = this.getAttribute("data-code");
  name.value = this.getAttribute("data-name");
}, false);

You can do something like:

<script>
function updateValues(el) {
  var form = el.form;
  var v = el.value;
  v = v.replace(/^\[\'|\'\]$/g,'').split("', '");
  form.Code.value = v[1];
  form.Name.value = v[0];
}
</script>

<form action="action.php" method="post" name="form1" id="form1">
  Code: <input type="text" name="Code" size="32" readonly> <br>
  Name: <input type="text" name="Name" size="32" readonly> <br>
  <select class="paselect" onchange="updateValues(this);">
    <option value="['Name A', '2413']">2413 - Name A
    <option value="['Name B', '2413']">2413 - Name B
    <option value="['Name C', '2413']">2413 - Name C
  </select>
</form>

Note that in IE if the user navigates the options using the cursor keys, an onchange event will be dispatched every time they move focus to a different option. Other browsers will wait for an option to actually be chosen with tab or space (depending on the browser).

Yeah I'd take an approach similar to the way Angular does this - using jquery with rodneyrehm's example:

<select class="paselect" id="foo-list">
  <option data-name="Name A" data-code="2413">2413 - Name A</option>
  <option data-name="Name B" data-code="2413">2413 - Name B</option>
  <option data-name="Name C" data-code="2413">2413 - Name C</option>
</select>

$('#foo-list').change(function() {
    var opt = $(this.options[this.selectedIndex]);
    var name = opt.attr('data-name');
    var code = opt.attr('data-code');

    $('#status').text('Name: ' + name + ', Code: ' + code);
});

http://jsfiddle.net/b9chris/mbSLB/

This avoids the potentially flimsy regex; strings you store and what to escape when become simpler to consider and error check.

The data- prefix is just there to comply with the HTML5 spec, but the truth is you can make up whatever attribute names you like - so if you were generating this HTML on the server and wanted to keep it short you could even use a= and b=.

Try this

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="getValue(this.value);">
        <option value="Name A-2413">2413 - Name A</option>
        <option value="Name B-2413">2413 - Name B</option>
        <option value="Name C-2413">2413 - Name C</option>
    </select>
</form>

<script>
    function getValue(val){ 
        var myval=val.split('-');
        form1.elements['Code'].value=myval[1];
        form1.elements['Name'].value=myval[0];
    }
</script>

Use this code.

<script>
    function setdata(selectvalue, selecttext){  
        form1.elements['Code'].value = selectvalue;
        form1.elements['Name'].value = selecttext;
    }
</script>

<form action="action.php" method="post" name="form1" id="form1">
    Code: <input type="text" name="Code" value="" size="32" readonly="readonly" /> <br />
    Name: <input type="text" name="Name" value="" size="32" readonly="readonly" /> <br />
    <select class="paselect" onchange="setdata(this.value,this.options[this.selectedIndex].text)">
         <option value="['Name A', '2413']">2413 - Name A</option>
         <option value="['Name B', '2414']">2414 - Name B</option>
         <option value="['Name C', '2415']">2415 - Name C</option>
    </select>
</form>

Hope it helps to you.