Laravel & Ajax, Jquery – Input value of select dropdown to textbox

How can I achieve this output?

enter image description here

I want a dynamic dropdown like when I select a value on the dropdown then it the textbox should be filled with its connected value automatically

here is my database value example

enter image description here

so for example i choose 123 on the select dropdown then the textbox must be filled with 3 automatically, how can i do that?

here is my code it is not working btw.

View

       <span>Aircraft Name</span>
            <select name="aircraft_name" class="aircraftsName">
              <option value="0" disabled="true" selected="true"> Select </option>
              @foreach ($aircrafts as $aircraft)
                  <option value="{{ $aircraft->aircraft_registration_number }}">{{ $aircraft->aircraft_registration_number }}</option>
              @endforeach

            </select>

            <span>Aircraft ID</span>
            <input type="text" class="aircraft_id">

Controller
  public function findPrice(Request $request){


    $p=Product::select('aircrafts')->where('registred_company_name',$request->aircraft_id)->first();

    return response()->json($p);
}

Web
    Route::get('/admin/settings/findAirName','Admin<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b2e1d7c6c6dbdcd5c1f1dddcc6c0dddeded7c0f2d4dbdcd6f3dbc0fcd3dfd7">[email protected]</a>');

Ajax & Javascript
<script type="text/javascript">
$(document).ready(function(){
    $(document).on('change','.aircraft_id',function(){
        var air_id =  $(this).val();

        var a = $(this).parent();

        console.log("Its Change !");

        var op = "";

        $.ajax({
            type:'get',
            url:'{!!URL::to('/admin/settings/findAirName')!!}',
            data:{'id':air_id},
            dataType:'json',//return data will be json
            success:function(data){
                // console.log("price");
                console.log(data.registred_company_name);


                 a.find('.aircraft_id').val(data.registred_company_name);

            },
            error:function(){

            }
        });



    });
});

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You’re targeting the wrong element in the jquery. If you want to change the value of the textbox when the select dropdown is changed then you need to target the select. Change the target element from .aircraft_id to .aircraftsName on this line $(document).on('change', '.aircraftsName', function() {.

Also, you don’t need to make a call to the controller. You could put the aircraft_id as the value in the select dropdown. Updating the way the select dropdown is created to something like this might work:

<select name="aircraft_name" class="aircraftsName">
    <option value="0" disabled="true" selected="true"> Select </option>
    @foreach ($aircrafts as $aircraft)
       <option value="{{ $aircraft->aircraft_id }}">{{ $aircraft->aircraft_registration_number }}</option>
    @endforeach
</select>

Then your jquery could be as simple as this:
$(document).ready(function() {
    $(document).on('change', '.aircraftsName', function() {
        var air_id =  $('.aircraftsName').val();     // get id the value from the select
        $('.aircraft_id').val(air_id);   // set the textbox value

        // if you want the selected text instead of the value
        // var air_text = $('.aircraftsName option:selected').text(); 
    });
});

If you want to use an ajax call I’ve updated the code a little:
$(document).ready(function() {
    $(document).on('change', '.aircraftsName', function() {
        var air_id =  $(this).val();

        var a = $(this).parent();

        console.log("Its Change !");

        var op = "";

        $.ajax({
            type: 'get',
            url: '/admin/settings/findAirName',
            data: { 'id': air_id },
            dataType: 'json',      //return data will be json
            success: function(data) {
                // console.log("price");
                console.log(data.registred_company_name);

                a.find('.aircraft_id').val(data.aircraft_id); 
                // do you want to display id or registration name?
            },
            error:function(){

            }
        });
    });
});

This might get you closer. Since it’s a get request you could append the id to the url and not use the data parameter: url: '/admin/settings/findAirName?id=' + air_id;, but don’t include the line data: {id: air_id}.

Method 2

you can do it this way:

VIEW

<span>Aircraft Name</span>
<select id="aircraft_name" name="aircraft_name" class="aircraftsName">
    <option value="0" disabled="true" selected="true"> Select </option>
    @foreach ($aircrafts as $aircraft)
       <option value="{{ $aircraft->id}}">{{ $aircraft->aircraft_registration_number }}</option>
    @endforeach
</select>

<span>Aircraft ID</span>
<input id="aircraft_id" type="text" class="aircraft_id">

//JS
$(document).ready(function(){
  $("#aircraft_name").change(function(){
    var air_id =  $(this).val();
    $("#aircraft_id").val(air_id );
  });
});

I’ve added id on the select and input element


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x