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

            }
        });



    });
});

Improve this question
6
  • what is the output right now? what does this output console.log(data.registred_company_name);? Commented Jan 10, 2019 at 1:30
  • @erickb the output is nothing, nothing is showing or blank ;( Commented Jan 10, 2019 at 1:30
  • @erickb tbh i am not confident with my ajax sir, i think it is wrong :( Commented Jan 10, 2019 at 1:32
  • Is there an error in js console? can you console.log(data) instead? Commented Jan 10, 2019 at 2:01
  • Do you have change function that will fire when there is changes in your dropdown? Commented Jan 10, 2019 at 2:05

2 Answers 2

Reset to default
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}.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

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
hello sir can you please help me to change the textbox to the field name of the aircraft_registration_number ?
to put it simply i have this select option <option value="{{ $aircraft->aircraft_registration_number }}" >{{ $aircraft->aircraft_registration_number }}</option> so how can I get the aircraft_id on the texbox ?
The aircraft has a property aircraft_id so you can change the select option value to <option value="{{ $aircraft->aircraft_id}}" >{{ $aircraft->aircraft_registration_number }}</option> which should allow you to get the ID from the select into the textbox.
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

Improve this answer

2 Comments

@capt-teemo the last selector for the input is incorrect. Can you update it to #aircraft_id
@lthh89vt ops. my bad. thank you for correcting me! :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.