Change input, based on select:option

if you have included jQuery it should be as easy as:

// first, give your select box an ID
<select id="myselect"> 
...
</select>


// add the following onChange script
<script>
$('#myselect').change(function() {
    var value = $(this).val();
    if(!value) {
        // empty value and make the input editable
        $("#ver-city").val("").prop('readonly', false);
        return;
    }
    // set the value and make sure the user cannot edit it
    var name = $("option:selected", this).text();
    $("#ver-city").val(name).prop('readonly', true);
});
</script>

Hey @lostdreamer_nl

Thank you for your help.

jQuery is included. Also working with a select2 option.

Somehow it won't input the option:selected. Maybe it can't grab the values from the Verification Model. How could I console.log if it triggers the input?

You must use select2 events https://select2.org/programmatic-control/events

$('#myselect').on('select2:select', function (e) {
    var data = e.params.data;
    console.log(data);
    // @lostdreamer_nl change function here
});

My fault, had a typo on the select #id.

It works.

How can I now grab values for the other inputs based on the select option? @lostdreamer_nl

var name = $("option:selected", this).text();
$("#ver-name").val(name).prop('readonly', true); // {{$verification->name}}
...

in that case, you'd need to have the data in json format in JS as well:

// controller
$verifications = \App\Models\Verification::all();
return view('my-view', ['verifications' => $verifications])

// view
<select> 
        <option value="0">Select your information</option>
                @foreach($verifications as $verification)
                    <option value="{{$verification->id}}">{{$verification->city}}</option> 
                @endforeach 
</select> 

...


<script>
var verifications = {!! $verifications->keyBy('id')->toJson() !}};


$('#myselect').change(function() {
    var value = $(this).val();
    if(!value) {
        // empty value and make the input editable
        $("#ver-city").val("").prop('readonly', false);
        return;
    }

    // grab the Model data for this ID from the array of verifications:
    var model = verifications[value];
    console.log(model);
    // set the value and make sure the user cannot edit it
    $("#ver-city").val(model.name).prop('readonly', true);
    // fill other fields you need with model.someProperty
});

</script>

Great, @lostdreamer_nl

Thanks so much.

It works, with the little changes.

var verifications = {!! $verifications->get()->keyBy('id')->toJson() !!};

calling get() again should not be needed (it will run another MySQL query)

If you have the code in your controller setup as I stated, you should already have a Collection in $verifications on which you can call keyBy()

saving you from doing another (needless) query.

Without get(), I get:

Illuminate\Database\Query\Builder::keyBy does not exist.

in that case, there should be something off in the controller:

$verifications = \App\Models\Verification::all();
return view('my-view', ['verifications' => $verifications])

$verifications should be a collection when it's send to the view, not a builder (query) object.

It could also be that you are looping over something in your view and overriding the $verifications variable

I think it is because I am looping over something in my view, as there are multiple selects, for multiple Models. @lostdreamer_nl

Thank you for your great help.

for your own sake, try not to re-use variables ;) specially in loops, it will give strange problems that are pretty hard to debug later.