How to change td values by changing an input number value?

Question

0.00/5 (No votes)

See more:

I have a View that shows Products By Group. My purpose is when a User enter a number into productCount input, Sum of ProductPrice ,and Sum of Product price with discount chang,How can i do this?
I have tried a function ,that is written at the bottom of the view,but it just work on first row,then i tried to use class instead using id ,but it dosent work for each rows.

how can i write function MySum() to work on each row of table?

What I have tried:

HTML

    <div class="row ">
          
  <table class="table table-bordered table-hover table-striped col-md-11 text-center ">
                <tr>
                    <th>Row</th>
                    <th>Image</th>
                    <th>ProductTitle and Details</th>
                    <th>Size</th>
                    <th>Price</th>
                    <th>Discount</th>
                    <th>Count</th>
                    <th>Sum</th>
                    <th>SumWithDiscount</th>
                   

                </tr>
                @{
                    int RowCount = 1;
                }
                @foreach (var item in Model.IEProduct)
            {
                    
                    <tr>
                        <td>@RowCount</td>
                        <td><img src="/img/logo.png" width="100" /></td>
                        <td><a href="/Product/ShowProduct/@item.ProductID" target="_blank">@item.ProductTitle</a></td>
                        <td>@item.Size</td>
                        <td value="@item.ProductPrice"  class="productPrice">
                            @if (item.ProductPrice.HasValue)
                            {
                                @item.ProductPrice.Value.ToString("0,#")
                                
                            }
                            
                           
                        </td>
                        @if(item.Discounts.Any(d => d.ProductID == item.ProductID))
                        { 
                            <td  class="productDiscount" value="@item.Discounts.First(d => d.ProductID == item.ProductID).DiscountPercent" >
                                @item.Discounts.First(d => d.ProductID == item.ProductID).DiscountPercent
                            </td>
                        }
                        else
                        {
                            <td  class="productDiscount" value="0" >
                             0
                         </td>
                            
                        }
                       @*@Html.Action("shoppingCart","Product",new {productid=item.ProductID })*@
                        <td>
                            <input type="number" min="0"   class="input"  style="width: 70px;"/>
                        </td>
                        <td  class="Sum">
                            
                        </td>
                        <td  class="SumWithDiscount">
                           
                        </td>
                           </tr>

                    RowCount++;
                } 
            </table>
        </div>

    </div>
</div>


@section Script
{
   
    <script>
    
    function MySum() {
       var percent = $('#productDiscount').attr("value");
       var price = $('#productPrice').attr("value");
        var productcount = document.getElementById('count').value;
       var sum = productcount * price;
        var sumwithdiscount = sum - ((sum * percent) / 100);

        $('#Sum').html(sum);

        $('#SumWithDiscount').html(sumwithdiscount);

    }
    
        $(".input").onKeyUp(function () {
            var percent = $('.productDiscount').attr("value");
            var price = $('.productPrice').attr("value");
            var productcount = $(this).value;
            var sum = productcount * price;
            var sumwithdiscount = sum - ((sum * percent) / 100);
            
            $(".Sum").each(function () {
                $(this).html(sum);
            });
            $(".SumWithDiscount").each(function() {
                $(this).html(sumwithdiscount);
            });
        });

       
</script>
   
   
}

Posted 5-May-20 5:29am

Member 13646828

Updated 5-May-20 19:56pm

v2

Add a Solution

Comments

j snooze 5-May-20 17:06pm

There are many ways you could do this, you could getElementsByTagName and grab the rows. you could put a certain class or name on all the elements you want to sum and use jquery to grab all of them, or regular javascript getElementsByName. many options to choose from.

Member 13646828 6-May-20 1:02am

I have tried to use class for elements but it does not work.

would you please give me an example? i am new in javascript

j snooze 7-May-20 17:47pm

This is not exact syntax but google around to get that. First start your rowcount at 0 instead of 1 so you have a row zero, which will help with the next part. Next give all the elements holding values you want to calculate a name attribute even if its a table sell so
(I can't put html stuff in here or it will encode it so just know greater than/less than signs should be used in your html)

(html)
td name="discountPercent" class="productDiscount" value="@item.Discounts.First(d => d.ProductID == item.ProductID).DiscountPercent"

td name="productPrice" value="@item.ProductPrice" class="productPrice"

td name="quantity" type="number" min="0" class="input" style="width: 70px;"

td name="Sum"

now in your javascript instead of the jquery firing on keyup create a function like
(javascript)
function onCountChange(rownumber){
var discntPct = document.getElementsByName("discountPercent");
var prodPrice = document.getElementsByName("productPrice");
var qty = document.getElementsByName("quantity");
var sum = document.getElementsByName("Sum");

sum.innerText = qty[rownumber] * prodPrice[rownumber] * discntPct[rownumber]
}

So essentially you can use that row number you already have to reference each control if you give each control or column that you want to use in the calculation a name. So all the discount percent TD columns have a name you can query with the getElementsByName, which creates an array in javascript of all the elements with that name. Passing the row number to the javscript function tells the function which row count changed so you can do your math on that row.

Hopefully this helps point you in the right direction. this can all be done with jquery as well, I just went a little old style.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)