How to output a value from database on selecting an option from dropdown using loop?-CodePudding

I am new to laravel.

I have a data set from a database which is stored in a variable product_data.

name	number_of_products	price
0-50k	2	200
51-100k	3	123
100-150k	6	345
150-200k	8	450

I want to write name as dropdown , on selecting a particular name the number of products and price should display as text . I wish to add another dropdown for quantity for each name , the quantity should be maximum of number of products.

For example: If I select a name 51-100k from the dropdown, the price 123 should display in text field and number of products 3 should display in a text filed and the quantity in dropdown should range from 1 to 3 . This fields should also save to another table in database with table name as bid_price with fields as name, number_of_products,bid_price, original_Price.

What I have tried is:

<div class="form-group row">    
     <label>Select Milege gap: </label>
<select class="form-select" name="mileage" id="mileage" onchange="getOption()">
    {% for p in product_data %}
    <option value="{{p.name}}">{{p.name}}</option>
    {% endfor %}
</select>           
</div>
 <div class="form-group row">   
     <label>Avalaible Quantity: </label>
        <input type="text" class="form-control" readonly name="avaialbe_qty"/>
        
</div>
  <div class="form-group row">  
     <label>Quantity: </label>
<select class="form-select" name="quantity" id="quantity" >
    {% for p in product_data %}
    <option value="{{p.number_of_products}}">{{p.number_of_products}}</option>
    {% endfor %}
</select>           
</div>                                  

  <div class="form-group row">
    <label for="inputBid" class="col-sm-2 col-form-label" >Enter Bid Price</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" id="inputBid" name="bid"  />
    </div>
  </div>
            
 <script>
function getOption()
    {
        var select = document.getElementById('mileage');
        var option = select.options[select.selectedIndex];
        document.getElementById('truck').value = option.value;
    }
</script>

How to show the corresponding price and number of products based on select value of dropdown.?

CodePudding user response：

{% for p in product_data %}
  <option value="{{p.number_of_products}}">{{p.number_of_products}}</option>
    {% endfor %}

This is Jinja not blade in order to use blade

@foreach($product_data as $product)
  <option value="{{$product->number_of_products}}">{{$product->number_of_products}} - ${{$product->price}}</option>
@endforeach

CodePudding user response：

The below given snippet is an example to illustrate how to achieve your goal in plain php and javascript. You may change it into Laravel Blade and frontend of your choice.

<?php
$data = [
    [
        "name" => "0-50k",
        "number_of_products" => 2,
        "price" => 200,
    ],

    [
        "name" => "51-100k",
        "number_of_products" => 3,
        "price" => 123,
    ],

    [
        "name" => "100-150k",
        "number_of_products" => 6,
        "price" => 345,
    ],

    [
        "name" => "150-200k",
        "number_of_products" => 8,
        "price" => 450,
    ]
];
?>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3 Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<body>
    <div class="container">
        <div class="row mt-1 p-5">
            <div class="text-success" id="summary"></div>
        </div>
        <div class="row mt-5 p-5">
            <div class="col-3">
                <select name="mileage" id="mileage" onchange="updatePage()" class="form-control">
                    <option value="">Select</option>
                    <?php foreach ($data as $row) : ?>
                        <option value="<?php echo $row['price']; ?>" data-name="<?php echo $row['name']; ?>" data-numberofprods="<?php echo $row['number_of_products']; ?>" data-price="<?php echo $row['price']; ?>">
                            <?php echo $row['name']; ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>
            <div class="col-3">
                <input type="text" id="truck" value="" class="form-control" />
            </div>
        </div>
    </div>
</body>

<script>
    function updatePage() {
        var summEl = document.getElementById('summary')
        summEl.innerHTML = null;
        var select = document.getElementById('mileage');
        var selectedElem = select.options[select.selectedIndex]
        var val = selectedElem.value
        var outputEl = document.getElementById('truck');

        if (typeof val === 'undefined' || '' === val) {
            outputEl.value = '';
        }
        let name = selectedElem.getAttribute('data-name')
        let numOfProds = selectedElem.getAttribute('data-numberofprods')
        let price = selectedElem.getAttribute('data-price')
        outputEl.value = price;
        summEl.innerHTML = `Maximum ${numOfProds} ${name} products are available.`
    }
</script>