0

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\SettingsController@findAirName');

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(){

            }
        });



    });
});

2 Answers2

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}.

haldo
  • 14,512
  • 5
  • 46
  • 52
  • hello thank you the Jquery Works but I want is to get the id on the textbox not the same string value on the select box. how can we do that sir? thank you for the jqueury it work but it is not correct i want to get the id not the aircraft_registration_number –  Jan 10 '19 at 02:58
  • hello sir can you please help me to change the textbox to the field name of the `aircraft_registration_number` ? –  Jan 10 '19 at 03:05
  • to put it simply i have this select option `` so how can I get the aircraft_id on the texbox ? –  Jan 10 '19 at 03:07
  • The aircraft has a property `aircraft_id` so you can change the select option value to `` which should allow you to get the ID from the `select` into the `textbox`. – haldo Jan 10 '19 at 08:59
0

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

Kapitan Teemo
  • 2,144
  • 1
  • 11
  • 25