Javascript call is only working for the first item inside foreach statement

Question

I am a beginner in mvc and am developing an ecommerce website. In my cart list i need to enter specific quantity to calculate the total price. I used a java script call inside the foreach statement ,but the call only works for the first item in the cart itemlist.

when i click the second or other item's "Total Price" field then the controls goes to the first item's "Total Price" field.

My script is

<script>
    function edValueKeyPress() {
        var i ;
        for (i = 0; i < 5; i++) {
            var edValue = document.getElementById("qt");
            var edValue1 = document.getElementById("cprice");
            var s = edValue.value * edValue1.value;
            var t = document.getElementById("total");
            t.value = s;

        }}
 </script>

My view

<table class="table">
    @foreach (var item in lscart)
    {
        <tr>
            <td>
                @{
                    var base64 = Convert.ToBase64String(item.CImage);
                    var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                    <img src='@imgSrc' style="width:100px; height:100px;" />
                 }
            </td>
            <td>@Html.DisplayFor(modelItem => item.CProductName)</td>
            <td>Rs.</td>
            <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly",@id="cprice" } })</td>

            <td>
                <div class="col-md-6">

                    @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty",@id="qt" } })
                </div>

            </td>
            <td>
                <div>
                    @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total", @onclick = "edValueKeyPress()", @onkeyup = "edValueKeyPress()" } })

                </div>
            </td>

            <td><a href="#"><i class="fa fa-close"></i></a></td>
        </tr>
    }

</table>

here is the design sample

https://i.stack.imgur.com/MF9pV.png

Duplicate `id` attributes are invalid html. Remove them all using `new { id = "" }` and use class names and relative selectors. Refer also [this answer](http://stackoverflow.com/questions/30094047/html-table-to-ado-net-datatable/30094943#30094943) to understand how to generate form controls for a collection — , Sep 06 '17 at 11:23
Your code is invalid and can't execute. You're missing a closing `}` — Jeremy Thille, Sep 06 '17 at 11:23
your problem is with the result html structure, you can't have multiple Dom elements with same id (qt and price) — FabioG, Sep 06 '17 at 11:24
your for loop generates DUPLICATE Id's which is causing the code to always select the first item as it is the first item with that ID in your HTML.. Use classes instead and also relative selector `this` — Rajshekar Reddy, Sep 06 '17 at 11:24
Where do i use 'this',could you please show me . @Rajshekae Reddy — PRADEEP, Sep 07 '17 at 03:10

score 0 · Answer 1 · answered Sep 06 '17 at 11:58

You need to add identical id names

<table class="table">
    @{
         var i = 0; // add a variable to get count
    }
    @foreach (var item in lscart)
    {
        i++; // incrementing for each iteration
        <tr>
            <td>
                @{
                    var base64 = Convert.ToBase64String(item.CImage);
                    var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                    <img src='@imgSrc' style="width:100px; height:100px;" />
                 }
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.CProductName)
            </td>
            <td>
                Rs.
            </td>
            <td>
                @Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id="cprice_"+@i } }) // change id 
            </td>
            <td>
                <div class="col-md-6">
                     @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id="qt_"+@i } }) // change id 
                </div>
            </td>
            <td>
                <div>
                    @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total_"+@i, @onclick = "edValueKeyPress(@i)", @onkeyup = "edValueKeyPress(@i)" } }) // change id and pass value of i in onclick
                </div>
            </td>
            <td>
                <a href="#"><i class="fa fa-close"></i></a>
            </td>
        </tr>
    }
</table>

Script will looks like this

<script>
    function edValueKeyPress(i) {
        var edValue = document.getElementById("qt_"+i);
        var edValue1 = document.getElementById("cprice_"+i);
        var s = edValue.value * edValue1.value;
        var t = document.getElementById("total_"+i);
        t.value = s;
    }
</script>

This code probably works may be issue is due to '}' provide closing bracket at the end. But the logic seems fine. — Sreerejith S S, Sep 07 '17 at 04:52

score 0 · Accepted Answer · answered Sep 07 '17 at 09:50

//view

<table class="table">

                        @{
                            int i = 0;

                            foreach (var item in lscart)
                            {
                                i = i + 1;
                                <tr>
                                    <td>
                                        @{
                                var base64 = Convert.ToBase64String(item.CImage);
                                var imgSrc = String.Format("data:image/jpg;base64,{0}", base64);
                                <img src='@imgSrc' style="width:100px; height:100px;" />
                                        }
                                    </td>
                                    <td>@Html.DisplayFor(modelItem => item.CProductName)</td>
                                    <td>Rs.</td>
                                    <td>@Html.EditorFor(modelItem => item.CPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @id = "cprice" + @i } })</td>

                                    <td>
                                        <div class="col-md-6">
                                            @*@Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @onkeyup = "sum()" } })*@
                                            @Html.EditorFor(modelItem => item.Cquantity, new { htmlAttributes = new { @class = "form-control", @placeholder = " Qty", @id = "qt" + @i } })


                                        </div>

                                    </td>


                                    <td>
                                        <div>
                                            @Html.EditorFor(modelItem => item.CTotalPrice, new { htmlAttributes = new { @class = "form-control", @readonly = "readonly", @placeholder = " Total Price", @id = "total" + @i, @onclick = "edValueKeyPress(" + @i + ")", @onkeyup = "edValueKeyPress(" + @i + ")" } })

                                        </div>
                                    </td>

                                    <td><a href="#"><i class="fa fa-close"></i></a></td>
                                </tr>
                            }
                        }


                    </table>

//script

<script>
    function edValueKeyPress(i) {


        //alert(i);
        var edValue = document.getElementById("qt" + i);
        var edValue1 = document.getElementById("cprice" + i);
        var s = edValue.value * edValue1.value;
        var t = document.getElementById("total" + i);
        t.value = s;






    }
</script>

Javascript call is only working for the first item inside foreach statement

2 Answers2