jQuery on change select field populate input text field

Question

I want to take the value from each select field either by name selector or id and input that value into input text field again either by name selector or id.

Note the 0 at the end of id that can go from 0 to ++ number count up. I want the value of this select field to be input in the input text field on value change.

<select name="option_tree[orn_category_background][0][orn_cat_bg_select]" id="orn_category_background_orn_cat_bg_select_0" class="option-tree-ui-select ">

<input type="text" name="option_tree[orn_category_background][0][title]" id="orn_category_background_title_0" value="VALUE FROM SELECT HERE" class="widefat option-tree-ui-input option-tree-setting-title">

Sudhir Bastakoti · Accepted Answer · 2014-01-21 02:57:40Z

1

you could use jQuery selector, like, do:

$("select[id^='orn_category_background_orn_cat_bg_select_']").change(function() {
   var $this = $(this), 
    idNum = $.attr("id").split("_").pop(); //get the last num 0, 1, etc
   $("input[id='orn_category_background_title_"+idNum+"']").val($this.val());
});

Demo:: jsFiddle

answered Jan 21, 2014 at 2:57

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

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

7 Comments

Jeton R. Over a year ago

i am calling this in document.ready and gave me this error Uncaught TypeError: Object function (e,t){return new x.fn.init(e,t,r)} has no method 'split'

Sudhir Bastakoti Over a year ago

@JetonR. can you post your code as well in question because it seems to work fine in jsfiddle as mentioned in my answer..!

Jeton R. Over a year ago

I am using this in WordPress admin panel in option-tree plugin. Does this require anything else than jQuery ?

Sudhir Bastakoti Over a year ago

nope, it only requires jQuery, i dont have good knowledge of wordpress, but you could try checking if your jquery is loaded properly..!

Jeton R. Over a year ago

should this also work to get the text of the selected option? In this case it gets all options not the selected one!

|

Geo · Accepted Answer · 2014-01-21 03:18:48Z

Here is a simple method that you can tailor to your needs.

HTML Part

<select name="option_tree[orn_category_background][0][orn_cat_bg_select]" id="orn_category_background_orn_cat_bg_select_0" class="option-tree-ui-select getOption">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="text" name="option_tree[orn_category_background][0][title]" id="orn_category_background_title_0" class="widefat option-tree-ui-input option-tree-setting-title returnValue">

jQuery Part

$('.getOption').change(function () {
   $( "select option:selected" ).each(function() {
         $('.returnValue').val($( this ).text());
    });

});

Remember to add the new classes to your html elements.

Collectives™ on Stack Overflow

jQuery on change select field populate input text field

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related