-2

I've a dropdown for Book Name. The user has to select the required Book Name from the drop down.As the user selects the book name, I have to show the price of that book in read only textbox. The values are retrieved from database. How can I do this? It is not duplicate question. I want to know how to get the associated value selected in the drop down menu.

controller method

public function getBooks()
    {
        return Book::all('BookName', 'BookID', 'Price');

    }

view page

<div class="form-group" style="padding-left: 5%;">
        <label>Book Name</label><span class="required">*</span>
        <select class="js-example-basic-single form-control" name="sel_Book">
            @foreach ($books as $data)                                       
                <option value="{{ $data->BookID }}">{{ $data->BookName }}</option>                                                      
            @endforeach
        </select>
</div> 
<div class="form-group" style="padding-left: 5%;">
    <label>Book Price</label><span class="required">*</span>
   <input type="text" readonly="readonly" class="form-control"/>
</div>
nischalinn
  • 1,133
  • 2
  • 12
  • 38
  • You will need to use [AJAX](https://api.jquery.com/jQuery.ajax/) for this. – Igor Ilic Aug 07 '18 at 09:59
  • @IgorIlic I am learning Laravel I do not know how to implement AJAX for this case. Please help!!! – nischalinn Aug 07 '18 at 10:01
  • Possible duplicate of [jQuery Ajax POST example with PHP](https://stackoverflow.com/questions/5004233/jquery-ajax-post-example-with-php) – Igor Ilic Aug 07 '18 at 10:03
  • @lgorllic how this question is duplicate? I want to display data based on selected value from dropdown. If you have the solution, better to reply than to say duplicate/negative marking. That will be more helpful. – nischalinn Aug 07 '18 at 10:07

1 Answers1

0

you need to make a Ajax call to backend to retrieve books price and then repopulate that price into read only price field. Make sure to give a id to the price input box (<input type="text" id="price-display" readonly="readonly" class="form-control"/>), so that you can use that id to find that input element and display price. `

 jQuery(document).ready(function($){
        $("select[name='sel_Book']").change(function() {
            var $form = $("#myForm");
            var selectedBookId = $(this).val();
            $.post( "http://localhost/lookup-price", { bookId: selectedBookId })
            .done(function( data ) {
                //then populate your read only field with data returned from ajax request
                $("#price-display").val(data.price);
            });
        });
    });
`
Abdul Mannan
  • 1
  • 2