Randy_Johnson
2 months ago
201
3
General

Jquery Help

Posted 2 months ago by Randy_Johnson

I am trying to cal the amount and price, I was originally going to do it through PHP but realized it would be much more efficient doing it through jquery.

I am follow this:

https://jsfiddle.net/jakecigar/pTQgB/1/

Here is my code:

<div class="card-body">
                    <div class="row">
                        <div class="col">
                            <img class="img-thumbnail mx-left d-block shadow mx-auto" style="width: 300px; height: 300px;" src="{{ URL::asset('storage/img/product/'.$products->img) }}">
                        </div>
                        <div class="col">
                            <form method="POST" action="/add-to-cart" enctype="multipart/form-data">
                            @csrf
                                <div class="form-group">
                                    <label>Name</label>
                                    <input name="name" type="" class="form-control" placeholder="Enter name" value="{{ $products->name }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="exampleFormControlTextarea1">Description</label>
                                    <textarea name="description" class="form-control" id="exampleFormControlTextarea1" rows="3" readonly>{{ $products->description }}</textarea>
                                </div>
                                <div class="form-group">
                                    <label>Price Per KG (GBP)</label>
                                    <input id="price" name="price" class="form-control" placeholder="Enter price" value="{{ $products->price }}" readonly>
                                </div>
                                <div class="form-group">
                                    <label for="exampleFormControlSelect1">Amount</label>
                                    <select id="amount" name="amount" class="form-control" id="exampleFormControlSelect1">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>Price (GBP)</label>
                                    <input id="total" name="name" type="number" class="form-control" value="0.00" readonly>
                                </div>
                                <!-- <button type="submit" class="btn btn-outline-success w-25" formaction="{{ url('calculate-product/'.$products->id) }}">Calculate</button> -->
                                <div id="calculate" type="button" class="btn btn-warning w-25">Calculate</div>
                                <button type="submit" class="btn btn-success w-25">Add</button>
                            </form>
                        </div>
                    </div>
                </div>
<script>
    var amount = $("#amount");
    var price = $("#price");
    $("#calculate").click(function () {
        var total = parseInt(amount.val()||0) + parseInt(price.val()||0);
        alert(total);
        $("#totalamountremaining").val(total);
    })
</script>

Please sign in or create an account to participate in this conversation.