CODEWITHSUNDEEP
javascriptjquery
Jeton R.
Jeton R.

Reputation: 395

jQuery on change select field populate input text field

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">

Upvotes: 0

Views: 3028

Answers (2)

Geo
Geo

Reputation: 3200

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.

Upvotes: 0

Sudhir Bastakoti
Sudhir Bastakoti

Reputation: 100175

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

Upvotes: 1

Related Questions