CODEWITHSUNDEEP
jqueryasp.net-mvcforeach-loop-container
codeseeker
codeseeker

Reputation: 196

Get values inside a div which is iterated by a foreach loop in Jquery mvc4?

Am displaying values which is model binded by a Foreach loop.And loop is iterating Div instead of table row.I want to get the values inside jquery function .I dont know how to get i have tried a lot. here is my code:-

     @foreach(var p in Model.Cart)
                                   {

                                    a++;

         <div class="container">
            <div class="container-fluid" >
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="@Url.Content(p.img)" alt="Card image cap" style="height:150px;width:150px">
<input type="hidden" id="mid">@p.mid</input>
                            <h1 style="display:none">@p.mid</h1>
                            <div class="invert" id="count">
                                        <div class="quantity">
                                            <div class="quantity-select">
                                                <div class="entry value-minus" id="minus">&nbsp;</div>
                                                <div class="entry value" id="counter">@p.mcount</div>
                                                <div class="entry value-plus active" id="plus">&nbsp;</div>
                                            </div>
                                        </div>
                                    </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">@p.mname</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> @p.totalprize</h5>
                            <h1 style="display:none" id="pri" data-val="@p.mprize">@p.mprize</h1>
                          <a  id="close1" onclick="return onclickFunction(@p.mid)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

         </div>
                    }

Jquery

$('.entry.value-plus.active').click(function () {


        var row = $(this).closest(".card");
        var mid = $(row).children('#mid').val();
        var quantity = parseInt($(row).children('#count').text()) + 1; //parseInt($(row).children('#counter').text(),10);
        var a = parseInt($(row).children('#pri').text());
        var upprize = quantity * a;

        alert("mid="+mid+"\n"+"quantity="+quantity+"\n"+"prize="+upprize);
    });

Upvotes: 1

Views: 1992

Answers (2)

Vishal modi
Vishal modi

Reputation: 1720

you have to apply class instead of id for all that elements, which values you want in js code, then you need to fetch value using parent() method. I have created two div's with different type of value, check it.

 $('.entry.value-plus.active').click(function () {

        var mid = $(this).parent().parent().parent().parent().find('.mid').text();
        var quantity = parseInt($(this).parent().find('.counter').text());
        var a = $(this).parent().parent().parent().parent().parent().find('.card-body').children('.pri').text();
        var upprize = quantity * a;

        alert("mid=" + mid + "\n" + "quantity=" + quantity + "\n" + "prize=" + upprize);
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container entry value-plus active">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="test" alt="Card image cap" style="height:150px;width:150px">
                            <h1 style="display:none" class="mid">MID value1</h1>
                            <div class="invert" id="count">
                                <div class="quantity">
                                    <div class="quantity-select">
                                        <div class="entry value-minus" id="minus">&nbsp;</div>
                                        <div class="entry value counter" id="counter">15</div>
                                        <div class="entry value-plus active" id="plus">&nbsp;click me</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">MNAME</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> TOTALPRIZE</h5>
                            <h1 style="display:none" id="pri" class="pri" data-val="mprize">5000</h1>
                            <a id="close1" onclick="return onclickFunction(MID)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-12 mt-3">
                <div class="card">
                    <div class="card-horizontal" style="display:flex;flex: 1 1 auto;">
                        <div class="img-square-wrapper">
                            <img class="img-thumbnail" src="test" alt="Card image cap" style="height:150px;width:150px">
                            <h1 style="display:none" class="mid">MID value2</h1>
                            <div class="invert" id="count">
                                <div class="quantity">
                                    <div class="quantity-select">
                                        <div class="entry value-minus" id="minus">&nbsp;</div>
                                        <div class="entry value counter" id="counter">25</div>
                                        <div class="entry value-plus active" id="plus">&nbsp;click me</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            <h4 class="card-title">MNAME</h4>
                            <h5 class="card-text" id="prize"><i class="fa fa-inr" aria-hidden="true" style="font-size:20px"></i> TOTALPRIZE</h5>
                            <h1 style="display:none" id="pri" class="pri" data-val="mprize">10000</h1>
                            <a id="close1" onclick="return onclickFunction(MID)"> <i class="fa fa-times" aria-hidden="true" style="font-size:24px;color:red"></i> Remove</a>
                        </div>
                    </div>
                    <div class="card-footer">
                        <small class="text-muted">Deliver Within a Weak</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

Upvotes: 2

Karan
Karan

Reputation: 12629

I notice few inconsistencies as stated below.

  1. For input you have to assign value with attribute like below.

<input type="hidden" id="mid" value="@p.mid" />

  1. For getting quantity value I guess you should be using #counter instead of #count like below.

var quantity = parseInt($(row).children('#counter').text()) + 1;

Upvotes: 0

Related Questions