get the selected value from the multiple select option of same class

I have set of the data which I am fetching from the database using loop, here is my view.

 @foreach($offer as $off)
                <div class="container">
                    <h2 class="section-title no-margin-top">{{$off->name}}</h2>
                    <div class="row">
                        <div class="col-md-4">

                            <ul class="bxslider">
                              <li><img src="{{asset('uploads/offers/'.$off->image)}}" style="padding-left:17%;"></li>
                              <li style="display:none"><img src="{{asset('uploads/offers/46659.jpg')}}"></li>
                            </ul>

                        </div>
                        <div class="col-md-5">
                            <h3 class="no-margin-top">Description</h3>
                            <p style="text-align:justify;">{{$off->description}}</p>
                        </div>

                        <div class="col-md-3">
                            <div class="e-price">$ <span>{{$off->offerPrice->amount}}</span>.00</div>
                            <div class="row quantity-wrapper form-group">
                                <label class="col-md-3" style="padding-top:7px;">Quantity</label> 
                                <div class="col-md-9">
                                    <select class="form-control quantity" name="quantity" id="quantity{{$off->id}}">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                    </select>
                                </div>
                            </div>
                            <a href="#" class="btn btn-ar btn-block btn-success addtocart" id="{{$off->id}}"><i class="fa fa-shopping-cart"></i> Add to Cart</a>
                        </div>
                    </div>
                </div>
        @endforeach

Here I am calling the js on clicking the add To Cart Button. Currently, I am only being able to get the id of the clicked button. In addition to that, I also want to get the select value of the currently selected dropdown. I am using js like this to get the id of the clcked button.

<script type="text/javascript">
    $('.addtocart').off('click').on('click', function(){
        var offerId = $(this).prop('id');
    });
</script>

How can I modify above script in order to get the value of the currently selected option along with the id of the selected button.

Answers


$(".addtocart").click(function() {
   var getId = $(this).attr("id"); // gets id
   var selectedQty = $("#quantity"+getId).val(); //holds selection of quantity val
});

you can use above snippet to achieve your requirement

used + to concat string and var getId. .val() is used to get elements value.


<script type="text/javascript">
    $('.addtocart').off('click').on('click', function(){
        var offerId = $(this).prop('id');
        var selectedData = $('select[name="quantity"]').val();
        var selectedData = $('#quantity'+offerId).val(); //Optional
    });
</script>

$("#addtocart").click(function(){
    var cart = $('.pr_attribute'); //
    $.each(cart, function(index, value){
        console.log($(value).val());
    });
});

Need Your Help

How to visualize a state transition diagram in JUNG(Java Universal Network/Graph Framework)?

java graph jung markov-chains

I am stuck with the visualization part, I have created a DirectedSparseMultiGraph for the purpose of visualizing the following transition diagram. I want to draw it in the same manner as depicted ...

Test config for AVA + React-Native

javascript reactjs react-native babeljs ava

I try to test my react-native application using AVA and the babel-preset-react-native