CODEWITHSUNDEEP
javascriptjqueryasp.net
Unknown
Unknown

Reputation: 155

How to get the value of <td> in < tr><table> on changing of dropdown

I have a dynamic grid in which there is a tr. The tr contains first td which is a simple serial number. Second is a dropdown. and third is a simple display only td

The td which contains dropdown as an attribute called discount.

On selecting the dropdown I want to show that discount value in the last td

For this purpose I have an on change function on dropdown

 function showDiscount(id) {
       
        var DiscountValue = $('#ddDocuments :selected').attr('discount');
        var text = $('#' + id + 'selected').parent().parent().find('.DiscountPercentage').val();
  }

var DiscountValue = $('#ddDocuments :selected').attr('discount'); this code of line simply get the value of discount on selecting an option from dropdown. For example If I select option 1 it shows me its discount value. If option 2 is selected it shows me its discount value.

Now I want to show that discount value in my last I have been trying to do it by this

var text = $('#' + id + 'selected').parent().parent().find('.DiscountPercentage').val();

but it just gives me undefined. I feel like I am doing something wrong.

The grid is as follows :

    html += "<td disabled  class=\"GreyBorder\" >" + Count + "</td>";
                           
                            html += "<td class=\"GreyBorder\" >" + 
 createDropDownSelected(getdocumentbyId), "ddDocuments" + Count, " 
 onchange=\"showDiscount('ddDocuments','" + (Counter--) + "');\"", "98%", drr["docCode"].ToString()) 
   + "</td>";
                            html += "<td class=\"GreyBorder\" >" + 
 createDropDownSelected(getDataTableFromQuery("select defid,deftext from defferalstatus"), " 
     ddDefferalstatus", "", "98%", drr["defid"].ToString()) + "</td>";
                            html += "<td  class=\"DiscountPercentage\"  style=\" text-align: 
     centre;\" id='txtDiscount' > " + drr["Discount"].ToString() + " </td>";

I want to show that discount value in my last td

Can anybody tell me what am I missing?

Upvotes: 0

Views: 292

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Pay attention to IDs: they must be unique.

I would suggest to chenge your inline function from:

onchange="showDiscount('ddDocuments',  (Counter--));

to:

onchange="showDiscount(this, event);"

Where: this refers to current element (the dropdown) event: is the event object

In any case you need to use a .on() in order to:

attach an event handler function for one or more events to the selected elements.

The new function now is:

 function showDiscount(ele) {
     var DiscountValue = $(ele).find(':selected').attr('discount');
     $(ele).closest('tr').find('.DiscountPercentage').text(DiscountValue);
 }

The snippet:

function showDiscount(ele) {
    var DiscountValue = $(ele).find(':selected').attr('discount');
    $(ele).closest('tr').find('.DiscountPercentage').text(DiscountValue);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td disabled  class="GreyBorder">1</td>
            <td class="GreyBorder">
                <select name="cars" onchange="showDiscount(this, event);">
                    <option value="volvo" discount="10%">Volvo</option>
                    <option value="saab" discount="15%">Saab</option>
                    <option value="mercedes" discount="20%">Mercedes</option>
                    <option value="audi" discount="50%">Audi</option>
                </select>
            </td>
            <td class="GreyBorder">
                <select name="cars">
                    <option value="---">---</option>
                </select>
            </td>
            <td  class="DiscountPercentage"  style="text-align: center;" id="txtDiscount">10% </td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions