CODEWITHSUNDEEP
javascriptjquery
user3269519
user3269519

Reputation: 19

To populate multiple textboxes when a DropDownList value is selected using jQuery or Javascript

I want to populate multiple textboxes with value of a selected DropDownList (Select List) using jQuery. Here is the code I have

The jQuery Script

<script type="text/javascript">
   
        $("#item").change(function () {
            $("#txtbox").val($(this).val());
            });

                         
</script>
The drop down
 

<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>



Them the html text boxes

<input type="text" name="name" id="txtbox" />
<input type="text" name="name" id="txtbox" />
<input type="text" name="name" id="txtbox" />
and so on....

From the codes when i select the DropDown only the first textbox is populated. I want all the textboxes to be populated with the value of the selected DropDown

Upvotes: 1

Views: 2158

Answers (5)

rybo111
rybo111

Reputation: 12588

Consider using data attributes, so that you are not having to repeat your code.

$('[data-update-val]').change(function(){
  var el = $(this).data('update-val');
  $(el).val(this.value);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select data-update-val=".txtbox">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>

<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

You could make this code even more flexible. You can update multiple classes for instance, by splitting the contents of the data attribute by space and looping through them.

Also, consider having an empty option at the beginning, or putting this code inside a function that is run on load and when a change is made.

Upvotes: 0

Amal Dev
Amal Dev

Reputation: 1978

You can do like this also, though giving unique id's to the controls is recommended

<script type="text/javascript">

    $("#item").change(function () {
        $("[id=txtbox]").val($(this).val());
        });

</script>

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You are facing issue as IDs in HTML must be unique. You can use a common class instead, then you can use Class Selector (“.class”)

Selects all elements with the given class.

Here is an example.

Script

$("#item").change(function () {
    $(".txtbox").val($(this).val());
});

HTML

<input type="text" name="name" class="txtbox" />

Upvotes: 1

ozil
ozil

Reputation: 7117

Each element should have unique id. use class instead of

$("#item").change(function () {
   $(".txtbox").val($(this).val());
});  
<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>  
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

Upvotes: 1

dfsq
dfsq

Reputation: 193261

ID must be unique. Change to use classes and it should work:

$("#item").change(function () {
  $(".txtbox").val($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select name="item" id="item">
 <option value="1">Orange</option>
 <option value="2">Apple</option>
 <option value="3">Grapes</option>
</select>

<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />
<input type="text" name="name" class="txtbox" />

Upvotes: 3

Related Questions