javascript - Change Value of Input Field when Clicking Button -


i have set of radio buttons user can click. each radio button should able populate 4 input fields different values based on button user selected. in case

  • option 1
  • option 2
  • option 3

the radio button values should correspond following input field values (note added option 1 values default input field see jsfiddle)

option 1

  • #inputvaluea = option 1 - blue
  • #inputvalueb = option 1 - red
  • #inputvaluec = option 1 - yellow
  • #inputvalued = option 1 - green

option 2

  • #inputvaluea = option 2 - car
  • #inputvalueb = option 2 - bus
  • #inputvaluec = option 2 - train
  • #inputvalued = option 2 - bike

option 3

  • #inputvaluea = option 3 - cake
  • #inputvalueb = option 3 - sugar
  • #inputvaluec = option 3 - rice
  • #inputvalued = option 3 - beer

what looking try , figure out javascript write populate different input fields each time radio button pressed based on above values.

i have created jsfiddle here see demo.

my code is

    <!-- radio buttons --> <div data-toggle="buttons-radio">     <button id="option1" type="button" class="btn btn-primary active">option 1</button>     <button id="option2" type="button" class="btn btn-primary">option 2</button>     <button id="option3" type="button" class="btn btn-primary">option 3</button> </div>  <!-- input button 1 --> <div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span>     <input id="inputvaluea" type="text" value="option 1 - blue" name=""> </div>  <!-- input button 2 --> <div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span>     <input id="inputvalueb" type="text" value="option 1 - red" name=""> </div>  <!-- input button 3 --> <div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span>     <input id="inputvaluec" type="text" value="option 1 - yellow" name=""> </div>  <!-- input button 4 --> <div class="input-prepend"><span class="add-on"><i class="icon-tag"></i></span>     <input id="inputvalued" type="text" value="option 1 - green" name=""> </div> 

http://jsfiddle.net/fkh6c/

$(function() {     var values = [         ['blue', 'red', 'yellow', 'green'],         ['car', 'bus', 'train', 'bike'],         ['cake', 'sugar', 'rice', 'beer'],     ];      $('.btn-primary').on('click', function() {         var index = $(this).index();          (var = 0; < 5; i++) {             $('#inputvalue' + 'abcd'[i]).val('option ' + (index+1) + ' - ' + values[index][i]);         }      }); }); 

Comments

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -