CODEWITHSUNDEEP
javascriptjqueryhtml
Sudarshan Kalebere
Sudarshan Kalebere

Reputation: 3929

How to get attributes values on change of select dropdown

I have a select dropdown of addresses on change of select dropdown I need to get option attributes and paste them in input fields. Here is what I tried so far TryFiddle

I have data attributes as data-address, data-city, data-zipcode and data-country for each option, when I select any option I want that options data-attr to be pasted in respective input boxes;

here is my code 

$(document).ready(function(){
$('#saved_billing_addresses').on("change",function(){
            alert('change');
               $("#bill_address").val($(this).attr('data-address'));
               $("#bill_city").val($(this).attr('data-city'));
               $("#bill_zipcode").val($(this).attr('data-zipcode'));
               $("#bill_country").val($(this).attr('data-country'));
            })
        })

Html code

<div id="collapseOne" class="panel-collapse collapse in">
            <form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
            <div class="form-group">
                    <select name="" class="form-control" id="saved_billing_addresses">
                        <option value="">Select Address</option>
                        <option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
                         <option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
                          <option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
                    </select>
                </div>
            <div class="form-group">
                    <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
                </div>
                <div class="form-group" style="width:150px;float:left;">
                    <button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
                </div>
            </form>
        </div>
    </div>

I dont know whats going wrong it should work, please provide any suggestions

Upvotes: 1

Views: 328

Answers (6)

gaetanoM
gaetanoM

Reputation: 42054

You have some typos:

  • $(this) within change event is not $(this).find(':selected')
  • .data('address') could be used for attr('data-address')
  • event handler within the same event handler is useless
  • whenever possible you can cache selected elements

My proposal is:

$(function () {
  $('#saved_billing_addresses').on("change", function(e){
    var jqSelectedOption = $(this).find(':selected');
    $("#bill_address").val(jqSelectedOption.data('address'));
    $("#bill_city").val(jqSelectedOption.data('city'));
    $("#bill_zipcode").val(jqSelectedOption.data('zipcode'));
    $("#bill_country").val(jqSelectedOption.data('country'));
  });
});
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

<div id="collapseOne" class="panel-collapse collapse in">
    <form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
        <div class="form-group">
            <select name="" class="form-control" id="saved_billing_addresses">
                <option value="">Select Address</option>
                <option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
                <option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
                <option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
            </select>
        </div>
        <div class="form-group">
            <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
        </div>
        <div class="form-group">
            <input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
        </div>
        <div class="form-group">
            <input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
        </div>
        <div class="form-group">
            <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
        </div>
        <div class="form-group" style="width:150px;float:left;">
            <button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
        </div>
    </form>
</div>

Upvotes: 1

Sunil Havannavar
Sunil Havannavar

Reputation: 11

Why you added two on Change events functions,Please remove second one. Try this..

$(document).ready(function(){
       $('#saved_billing_addresses').on("change",function(){
          $("#bill_address").val($(this).find('option:selected').attr('data-address'));
          $("#bill_city").val($(this).find('option:selected').attr('data-city'));
          $("#bill_zipcode").val($(this).find('option:selected').attr('data-zipcode'));
          $("#bill_country").val($(this).find('option:selected').attr('data-country'));
       })
});

Upvotes: 0

Fahad Rehman
Fahad Rehman

Reputation: 1199

You can also use the find to get the data attributes

    $(document).ready(function(){
                $('#saved_billing_addresses').on("change",function(){
                      $("#bill_address").val($(this).find(':selected').data('address'));
                      $("#bill_city").val($(this).find(':selected').data('city'));
                      $("#bill_zipcode").val($(this).find(':selected').data('zipcode'));
                      $("#bill_country").val($(this).find(':selected').data('country')); 
                })        
    });

Upvotes: 0

Parvez Rahaman
Parvez Rahaman

Reputation: 4397

Try it..

$(document).ready(function(){
    $('#saved_billing_addresses').on("change",function(){
      $("#bill_address").val($('option:selected', this).data('address'));
      $("#bill_city").val($('option:selected', this).data('city'));
      $("#bill_zipcode").val($('option:selected', this).data('zipcode'));
      $("#bill_country").val($('option:selected', this).data('country'));
    })
});
.hide-it{
  display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-rc1/jquery.min.js"></script>
<div id="collapseOne" class="panel-collapse collapse in">
            <form role="form" onsubmit="event.preventDefault();" action="#" method="post" class="billing-form" id="billing-form">
            <div class="form-group">
                    <select name="" class="form-control" id="saved_billing_addresses">
                        <option value="">Select Address</option>
                        <option value="" data-address="Koramangala" data-city="Bangalore" data-zipcode="216521" data-country="India">Koramangala, Banglore, 211322, India</option>
                         <option value="" data-address="Shivaji nagar" data-city="Mumbai" data-zipcode="123455" data-country="India">Shivaji Nagar, Mumbai, 123455, India</option>
                          <option value="" data-address="Ambedkar nagar" data-city="Kolkata" data-zipcode="567890" data-country="India">Ambedkar Nagar, Kolkata, 567890, India</option>
                    </select>
                </div>
            <div class="form-group">
                    <textarea autofocus class="f-bill bill_address form-control form-group" placeholder="* Address" name="billing[address]" id="bill_address" cols="30" rows="3"></textarea>
                </div>
                <div class="form-group">
                    <input type="text" name="billing[city]" placeholder="* City" class="f-bill bill_city form-control" id="bill_city" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[zip_code]" placeholder="* Zipcode" class="f-bill bill_zipcode form-control" id="bill_zipcode" value="">
                </div>
                <div class="form-group">
                    <input type="text" name="billing[country]" placeholder="* Country" class="bill_country f-bill form-control" id="bill_country" value="">
                </div>
                <div class="form-group" style="width:150px;float:left;">
                    <button type="submit" id="next_check" class="btn btn-next pull-right btn-success bill-ship-btn">Next</button>
                </div>
            </form>
        </div>
    </div>

Upvotes: 1

Azamantes
Azamantes

Reputation: 1451

This is what you need.

$('#saved_billing_addresses').on("change",function(event){
    const $this = this.options[this.selectedIndex];
    $("#bill_address").val($this.getAttribute('data-address'));
    $("#bill_city").val($this.getAttribute('data-city'));
    $("#bill_zipcode").val($this.getAttribute('data-zipcode'));
    $("#bill_country").val($this.getAttribute('data-country'));
});

Upvotes: 0

T.J. Crowder
T.J. Crowder

Reputation: 1074295

This is one of the rare places where jQuery doesn't do much for you, your best bet is to use the select box's native selectedIndex property and options collection:

// Get the selected HTMLOptionElement
var opt = this.options[this.selectedIndex];

E.g.: (updated fiddle)

$(document).ready(function() {
    $('#saved_billing_addresses').on("change", function() {
        var opt = this.options[this.selectedIndex];
        if (opt) {
            opt = $(opt);
            $("#bill_address").val(opt.attr('data-address'));
            $("#bill_city").val(opt.attr('data-city'));
            $("#bill_zipcode").val(opt.attr('data-zipcode'));
            $("#bill_country").val(opt.attr('data-country'));
        }
    })
});

Upvotes: 3

Related Questions