update text box on select onchange event using javascript

Question

Hello i got a selection menu, i need to update 3 text boxes when the selection is done, and should load a default 1 as follows..

    <select name="select" id="select">
      <option value="1">selection 1</option>
      <option value="2">selection 2</option>
      <option value="3">selection 3</option>
    </select>

    <input type="text" name="txt1" id="txt1" value="1"/>
    <input type="text" name="txt2" id="txt2" value="2"/>
    <input type="text" name="txt3" id="txt3" value="3"/>

// if selection 1 is selected text box's values should come as follows, (Default)
id="txt1" value="1" >> id="txt2" value="2" >> id="txt3" value="3"

// if selection 2 is selected text box's values should come as follows,
id="txt1" value="4" >> id="txt2" value="5" >> id="txt3" value="6"

// if selection 3 is selected text box's values should come as follows,
id="txt1" value="7" >> id="txt2" value="8" >> id="txt3" value="9"

any JavaScript help?? many thanks!!!

Basic JS, create an onchange event, based on the select value, update your textbox. To get you started: document.getElementById("select").onchange = function() { console.log(this.value); //select value } — tymeJV
– tymeJV, Commented Aug 20, 2013 at 14:13
@Khanh TO thanks for demo, but sometimes i need to pass text's to text box value's (not only 1,2,3). so i need to predefine them no?? so can you please edit this for that also?? thanks again.. — user2645118
– user2645118, Commented Aug 20, 2013 at 14:37
@user2645118 see my answer below on how to map any value to the text box collection. — bluetoft
– bluetoft, Commented Aug 20, 2013 at 15:27

bluetoft · Accepted Answer · 2013-08-22 03:01:15Z

1

pure javascript implementation:

(function (){
    var dd = document.getElementById('select');

    //get the text inputs into an array
    var inputs = ['txt1','txt2','txt3'].map(function(a){
      return document.getElementById(a);
    });

    //use an object to map the select values to the desired input values
    //this can be an object returned from your server or wherever.
    var inputValues = {'1':['abe','lincoln','president'],'2':['bob','dylan','song n dance man'],'3':['numbers',1,'two']};

    //bind the change event to the select 
    dd.onchange=function(e){

      //get the selected value of the drop down
      var selectedValue = dd.children[dd.selectedIndex].value;

      //change the values of the inputs
      for(var i = 0,j=inputs.length;i < j;i++){
        inputs[parseInt(i,10)].value = inputValues[selectedValue][i];
      }
    };
})();

JSBIN

edited Aug 22, 2013 at 3:01

answered Aug 20, 2013 at 14:37

bluetoft

5,4432 gold badges25 silver badges27 bronze badges

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

Comments

Carsten Massmann · Accepted Answer · 2013-08-20 15:10:15Z

1

I am a bit late, but here is it:

$('select').change(function(){
  var sel=$(this).val();
    $('input[type=text]').each(function(i,el){
      $(el).val((i+1)+(sel-1)*3); 
    }); 
});

Edit:

Here is an example with a text input: http://jsfiddle.net/4LGWx/4/

t=['one','two','three','four','five','six','seven','eight','nine'];
$('select').change(function(){
  var sel=$(this).val();
    $('input[type=text]').each(function(i,el){
      $(el).val(t[i+(sel-1)*3]);
    });
});

or a slightly more elegant variant thereof:

$('select').change(function(){
  var t=[['one','two','three'],
         ['four','five','six'],
         ['seven','eight','nine']];
  var sel=$(this).val()-1;
    $('input[type=text]').each(function(i,el){
      $(el).val(t[i][sel]);
    });
});

(This time there is no global array ...)

edited Aug 20, 2013 at 15:10

answered Aug 20, 2013 at 14:21

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

3 Comments

Carsten Massmann Over a year ago

el is the current DOM element handed down by the each-callback-function, i is the index within the each-set (zero-based, that is why I have to add 1 in (i+1)) and sel is the selected value of your <select> element.

user2645118 Over a year ago

but i need to pass different values not only 1,2,3 i need to pass words also, can you edit this, thanks!!!!

Carsten Massmann Over a year ago

You can take the values from anywhere. When you look at my post you can use the index i to get a value from an array previously defined somewhere, or you can get the value from yet another callback function ...

jterry · Accepted Answer · 2013-08-20 14:12:45Z

0

You can just monitor the select and make the changes from there:

var t1 = $('#txt1');
var t2 = $('#txt2');
var t3 = $('#txt3');

$('#select').on('change', function(e) {
    var v = $(this).val();

    if('1' === v) {
        t1.val('1');
        t2.val('2');
        t3.val('3');

    } else if('2' === v) {
        t1.val('4');
        t2.val('5');
        t3.val('6');

    } else if('3' === v) {
        t1.val('7');
        t2.val('8');
        t3.val('9');

    }
}

answered Aug 20, 2013 at 14:12

jterry

6,2473 gold badges32 silver badges37 bronze badges

2 Comments

KKS Over a year ago

you may want to use switch case here.

user2645118 Over a year ago

@jterry i try your code but it is not working ne? did u miss anything. can you please recheck it thanks!!!

Mihai Matei · Accepted Answer · 2013-08-20 14:15:37Z

0

HTML:

<select name="select" id="select">
  <option value="1">selection 1</option>
  <option value="4">selection 2</option>
  <option value="7">selection 3</option>
</select>

<input type="text" name="txt1" id="txt1" value="1"/>
<input type="text" name="txt2" id="txt2" value="2"/>
<input type="text" name="txt3" id="txt3" value="3"/>

jQuery:

$(document).ready(function(){
  $('#select').change(function(){
    $select = $(this);
    $('input[id|="txt"]').each(function(i){
      $(this).val($select.val() + i);
    });
  });
});

answered Aug 20, 2013 at 14:15

Mihai Matei

24.3k5 gold badges34 silver badges50 bronze badges

Comments

Khanh TO · Accepted Answer · 2013-08-20 14:30:59Z

0

Assign a class to your textboxes for easier manipulation:

<input type="text" name="txt1" id="txt1" value="1" class="txt"/>
<input type="text" name="txt2" id="txt2" value="2" class="txt"/>
<input type="text" name="txt3" id="txt3" value="3" class="txt"/>

JQuery:

$("#select").change(function(event){
    var selectedValue = parseInt($(this).val());
    $(".txt").each(function(){
        $(this).val(parseInt(this.defaultValue) + (selectedValue-1)*3);
    });
});

Notice the defaultValue. This is the value assigned in the html and does not change when you set the current value to another value.

DEMO

edited Aug 20, 2013 at 14:30

answered Aug 20, 2013 at 14:15

Khanh TO

49k13 gold badges101 silver badges117 bronze badges

2 Comments

user2645118 Over a year ago

thanks for your reply, but i need to pass differnt values to text box i just enter "1,2,3" for sample. can i do it with this code? any help?? thanks.

user2645118 Over a year ago

thanks for demo, but sometimes i need to pass text's to text box value's (not only 1,2,3). so i need to predefine them no?? so can you please edit this for that also?? thanks again...

Collectives™ on Stack Overflow

update text box on select onchange event using javascript

5 Answers 5

Comments

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related