Getting html value and use it in controller Laravel php

Steven Lie 0
Viewed 34
<div class="form-group col-md-12" style="display:flex;">
    <label style="margin-right:10px;">Items<span class="text-danger">*</span></label>
    <select style="margin-right:10px;" name="product_id" id="product_id" class="btn btn-primary" type="text">
        @foreach ($listitem as $ll)
            <option id="itemname" value="{{$ll->id}}">{{$ll->name}} -- {{number_format($ll->price)}}</option>
        @endforeach
    </select>

    <label style="margin-right:10px;">Qty<span class="text-danger">*</span></label>
    <input type="number" class="form-control" required name="qty">
</div>

<div class="form-group col-md-12">
    <label>Price  : </label>
    <label for="">{{number_format($ll->price)}}</label>
</div>

How do I get the item dropdown menu id database and I will call it the id for a price where id = id from the value dropdown item name that every time I choose the dropdown item the id will change too so the price will also change depends on the id database from the drop-down menu.

php laravel html
1 Answers

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>


    <title></title>
</head>
<body>

<script>
    $(document).ready(function (){
        $('.selectedOption').on('click',function(){
            var price = $(this).find(':selected').data('price');
            $('#priceLable').text(price);
        })
    });
</script>
<div class="form-group col-md-12" style="display:flex;">
    <label style="margin-right:10px;">Items<span class="text-danger">*</span></label>
    <select style="margin-right:10px;" name="product_id" id="product_id" class="btn btn-primary selectedOption" type="text">
{{--        @foreach ($listitem as $ll)--}}
            <option id="itemname"  value="1" data-price="100">Name1 -- 100</option>
            <option id="itemname" value="2" data-price="150">Name2 -- 150</option>
{{--        @endforeach--}}
    </select>

    <label style="margin-right:10px;">Qty<span class="text-danger">*</span></label>
    <input type="number" class="form-control" required name="qty">
</div>

<div class="form-group col-md-12">
    <label>Price  : </label>
    <label for="" id="priceLable">0</label>
</div>
</div>



</body>
</html>

NOTE: I have hardcoded values you can add them dynamically

First add data-price="{{number_format($ll->price)}}" attribute to options in select

Assign ID to label <label for="" id="priceLable">{{number_format($ll->price)}}</label>

Then write a jQuery code to get value from the data attribute of the selected item and set it to label...

<script>
$(document).ready(function (){
    $('.selectedOption').on('click',function(){
        var price = $(this).find(':selected').data('price');
        $('#priceLable').text(price);
    })
});
userk7SG0
Related