Get array values from an option select with javascript to populate text fields

Question

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.

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

rodneyrehm · Accepted Answer · 2013-04-02 09:12:15Z

6

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);

answered Apr 2, 2013 at 9:12

rodneyrehm

13.6k1 gold badge43 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mario Over a year ago

Thank you for the answer, I tryed your script too but seems not working: jsfiddle.net/xtSqh

Mario Over a year ago

I re-tried your script also in local after jsfiddle and still not working in IE or FF. Thanks anyway for your suggestion, I never condisered to use data attributes.

RobG · Accepted Answer · 2013-04-02 09:24:17Z

2

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).

answered Apr 2, 2013 at 9:24

RobG

148k32 gold badges180 silver badges216 bronze badges

2 Comments

Mario Over a year ago

Thank you for the answer, I tried it but seems not working jsfiddle.net/Y8Mck

Mario Over a year ago

Actually this is working good! I don't know why in jsfiddle is not working but when I did the exact same thing in local it worked perfectly in IE and FF. Thanks!

Chris Moschini · Accepted Answer · 2013-04-02 11:59:58Z

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=.

Lukasz Koziara · Accepted Answer · 2014-03-31 07:38:00Z

1

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>

edited Mar 31, 2014 at 7:38

Lukasz Koziara

4,3225 gold badges34 silver badges45 bronze badges

answered Apr 2, 2013 at 9:57

Brijesh Eshwar

1266 bronze badges

1 Comment

Mario Over a year ago

Thanks a lot that's a great solution too!

Lukasz Koziara · Accepted Answer · 2014-03-31 07:38:26Z

1

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.

edited Mar 31, 2014 at 7:38

Lukasz Koziara

4,3225 gold badges34 silver badges45 bronze badges

answered Apr 2, 2013 at 9:40

Bharat Chodvadiya

1,6484 gold badges20 silver badges31 bronze badges

2 Comments

Mario Over a year ago

Hello and thanks for your answer, I tried your solution too but seems not working: jsfiddle.net/tyfQ2

Mario Over a year ago

Yes I tryed also in local after jsfiddle, it is working but not as asked, in fact I get "['Name B', '2414']" in the Code textfield and "2414 - Name B" in the Name textfield, it should be Code = 2414, Name = Name B. But thanks a lot for your suggestion.

Collectives™ on Stack Overflow

Get array values from an option select with javascript to populate text fields

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related