Update field with select data

Question

I have a field of type select that I select a driver, I would like when I select this driver the text field received the phone of this driver, which already comes with the information of the line of select!

<div class="row">
    <div class="col-md-9">
        <div class="form-group">
            <label>Motorista:</label>
            <div class="input-group">
                <div class="input-group-addon icone-input">
                    <i class="fa fa-users"></i>
                </div>
                <select id="select-motorista-ex" id="f_rec_analist_fiscal" name="f_rec_analist_fiscal" style="width: 100%">
                    <option value='1'>Selecione um parceiro</option>
                    @foreach($parceiros as $p)
                    <option value='{{$p->parc_cpf_cnpj}}'>{{$p->parc_razao_social}}</option>
                    @endforeach
                </select>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-group">
            <label>Contato</label>
            <div class="input-group">
                <div class="input-group-addon icone-input">
                    <i class="fa fa-edit"></i>
                </div>
                <input type="text" name="f_rec_motor_tel" id="f_rec_motor_tel" value="{{ old('f_rec_motor_tel') }}" class="form-control" maxlength="15" placeholder="(XX) XXXXX-XXXX">
            </div>
        </div>
    </div>
</div>

Follow picture:

Someone could help me because I don’t quite understand the ajax yet!

Answer 1

You can do this with ajax, I’ll show you a very practical and simple example to understand.

I created a select with drivers, in options I put the driver id and an input to receive the phone,

<select id="select-motorista-ex">
    <option value="1"> Motorista 1</option>
    <option value="2"> Motorista 2</option>
    <option value="3"> Motorista 3</option>
</select>
<input type="tel" id="telefone">

In javascript I used the function change, it is executed when there is some change in the element, when changes the driver’s select is executed and makes a request in php via post,

$("#select-motorista-ex").on("change", function(){
    var motorista = $(this).val();
    $.post("motorista.php", {motorista: motorista}, function( data ) {
        $("#telefone").val(data);
    });
});

Already PHP will be responsible for receiving the parameter taken in the value of select and send via ajax post, within php it is possible to perform a query in the database, I created a very simple array to get some result,

// array com os telefones de acordo com o id
$arrayMotorista =   [
                        1 => 99999999,
                        2 => 88888888,
                        3 => 77777777,
                    ];
// id do motorista selecionado no select
$motorista = $_POST['motorista'];
// resposta com o telefone do motorista
echo $arrayMotorista[$motorista];

Complement:

Noting that you use the Laravel, it is good to highlight some points.

1. Token

This is more specifically aimed at forms of the type AJAX. It’s basically taking the token and include it in the headers for when you submit a request via AJAX.

In addition to checking the token CSRF as a parameter POST, the middleware VerifyCsrfToken also checks the request header (X-CSRF-TOKEN). Hence the existence of this metatag.

<meta name="csrf-token" content="{{ csrf_token() }}">

So once the metatag, you can instruct a library like jQuery to automatically add the token to all request headers. This provides protection CSRF simple and convenient for your applications based on AJAX:

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

2. Route

You will need to define a route (and of course create a function in the Controller) for this call.

Route::post('ajaxBusca', ['as' => 'ajax.busca', 'uses' => 'Ajax@BuscaAlgo']);

And of course, add it to the call.

...
$.ajax({
    url:"{{ route('ajax.busca') }}",
    data: {
        'motorista': 'dado referencia motorista'
    },   
...

3. Processing in the Controller

Like any manipulated fomulario in Laravel, you need to process the received data and send the response json.

public function BuscarAlgo(Request $request)
{
    $dados = $request->all(); // ou
    $dados = $request->except('_token');
    ......
    return response()->json($request->all());
}