CODEWITHSUNDEEP
javascript
Aux1234
Aux1234

Reputation: 53

How to use same JavaScript function in multiples Dropdownlists

I have multiple dropdown list added dynamically, and they get their own id, I have a function where I call OnChange event to pass some value based on selected in Dropdown list, but at the moment i am just doing this with the first select.

JS:

$("#id_detallepedido_set-0-producto").change(function () {
    producto_id = $(this).val();
    var url = '/control/price/'+producto_id;

    $.ajax({              
    type: "GET",    
    url: url,                   
    data: {
        'producto': producto_id 
    },
    success: function (data) {   
        console.log('Funciono!');
        console.log(data);
        $("#id_detallepedido_set-0-precio").val(data);       
    },
    error: function(data) {
        alert('error' + data);
        //console.log(data);
    } 

    });        
});

"id_detallepedido_set-0-producto" is the id for the first Dropdownlist, and "id_detallepedido_set-0-precio" is the id for the field I pass the value based on selected value, there is anyway to use this function in every dropdown list added dynamically?

And I'm adding those dropdown list with Django Form here:

Html:

<table class="table" id="tPedidos">
  {{ detalle.management_form }}
  {% for form in detalle.forms %}
    {% if forloop.first %}
      <thead>
        <tr>
            {% for field in form.visible_fields %}
                <th>{{ field.label|capfirst }}</th>
            {% endfor %}
        </tr>
        </thead>
    {% endif %}
      <tr class="formset_row-{{ formset.prefix }}">
        {% for field in form.visible_fields %}
          <td>
            {# Include the hidden fields in the form #}
            {% if forloop.first %}
                {% for hidden in form.hidden_fields %}
                    {{ hidden }}
                {% endfor %}
            {% endif %}
            {{ field.errors.as_ul }}
            {{ field }}
          </td>
        {% endfor %}
      </tr>
{% endfor %}
</table>

Upvotes: 1

Views: 76

Answers (3)

Vishal modi
Vishal modi

Reputation: 1720

Instead of handling dropdown change event using id, you can handle it using class. so it will execute for all dropdown. But as you said your dropdown is added dynamically, you need to create click event globally.

let say you have 3 dropdown, then just add class = "mydropdownclass". and add class = "mytextfield" to your text control.

<table>
    <tr>
        <td>
            <select id="t1" class="mydropdownclass">
                <option value="1">101</option>
                <option value="2">102</option>
            </select>

        </td>
        <td>
            <input type="text" class="test" />
        </td>

        <td>
            <input type="text" class="mytextfield" />
        </td>
    </tr>

    <tr>
        <td>
            <select id="t2" class="mydropdownclass">
                <option value="1">101</option>
                <option value="2">102</option>
            </select>

        </td>
        <td>
            <input type="text" class="test" />
        </td>

        <td>
            <input type="text" class="mytextfield" />
        </td>
    </tr>
</table>

<script>
$(document).on("change", ".mydropdownclass" , function() {
    producto_id = $(this).val();
    var controlId = $(this).attr('id');

    //Updat textbox value
    $(this).closest("tr").find('.mytextfield').val($(this).val());

    var url = '/control/price/'+producto_id;

    $.ajax({              
    type: "GET",    
    url: url,                   
    data: {
        'producto': producto_id 
    },
    success: function (data) {   
        console.log('Funciono!');
        console.log(data);
        $("#"+controlId).val(data);       
    },
    error: function(data) {
        alert('error' + data);
        //console.log(data);
    } 

    });        

});

</script>

you can check updated code [link]

https://jsfiddle.net/hubs3m0n/

Upvotes: 1

Kazi Hasan Ali
Kazi Hasan Ali

Reputation: 306

make a static class which will be same for every element and do in that way

$(".commonClass").change(function () {
    producto_id = $(this).val();
    var url = '/control/price/'+producto_id;

    $.ajax({              
    type: "GET",    
    url: url,                   
    data: {
        'producto': producto_id 
    },
    success: function (data) {   
        console.log('Funciono!');
        console.log(data);
        $("#id_detallepedido_set-0-precio").val(data);       
    },
    error: function(data) {
        alert('error' + data);
        //console.log(data);
    } 

    });        
});

Upvotes: 0

iAmADeveloper
iAmADeveloper

Reputation: 667

If elements are added dynamically you can attach an event to document like this.

$(document).on('change', '[write common selector here]', function callback() {})

Upvotes: 0

Related Questions