Fill in input according to other input response

Question

Good afternoon, I have the following code in my locker:

  <div class="form-group col-sm-6">
        <label class="control-label">{{ trans('app.select_client')}} <span class="text-danger">*</span></label>
            <select ng-model="cliente" class="form-control" name="cliente" id="cliente" required ng-init="cliente = '{{ old('cliente') }}'">
            <option value="">{{ trans('app.select_client')}} </option>  
                @foreach($clientes as $data)
                     <option value="{{$data->id}}">{{$data->nomeCliente}}</option>
                @endforeach
           </select>

  </div>


<div class="form-group col-sm-12">
     <label class="control-label" >{{ trans('app.for')}}<span class="spancolor">*</span> </label>
     <input type="text" class="form-control" value="" id="contato" ng-model="contato" name="contato" ng-init="contato='{{ old('contato') }}'" placeholder="{{ trans('app.contato')}}" required>     
</div>

<div class="form-group col-sm-12">
    <label class="control-label" >{{ trans('app.cc')}}<span class="spancolor">*</span> </label>         
    <input type="text" class="form-control" value="" id="cc" ng-model="cc" name="cc" ng-init="cc='{{ old('cc') }}'" placeholder="{{ trans('app.cc')}}" required>                            
</div>

I need to make the input id="contact" display the email of the selected client in select id="client"

My function in the controller

function getContatos(Request $request){

        $value = $request->get('value');
        $contatos = DB::table('clients')->select('contatos')->where('id', $value)->get();
        $cc = DB::table('clients')->select('cc')->where('id', $value)->get();
        echo $contatos;
        echo $cc;

        //return view('dashboard.dashboard_user',compact('contatos','cc')); 


    }

When I put the error Return What I need to return and show in the view is $contacts and $cc

$('select[name=cliente]').change(function () {

    associaInput();
  var value = $(this).val();
  var _token = $('input[name="_token"]').val();
    $.ajax({
        url:"{{ route('cliente.getContatos') }}",
        method:"POST",
        data:{value:value, _token:_token},
        success:function(result){
            alert("success");
            $("#contato").append($('#contato').val(value));
        }

    })
});

view function

Route::post('getContatos', 'DashboardController@getContatos')->name('cliente.getContatos');

Route

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class Client extends Model
    {
        protected $table = 'clients';
        protected $fillable = ['nomeCliente', 'contatos', 'cc', 'obscontatos', 'horarioInicial', 'horarioFinal', 'observacao', 'analistapreferencial', 'servicos'];
        protected $casts = [
             'cc' => 'array', 'obscontatos' => 'array', 'contatos' => 'array',
        ];

    }

Model de Clients

Answer 1

In fact it is quite quiet to carry out such barbarism, come on the/

---

Ajax

$(document).on("change", "#cliente", function () {
 var value = $(this).val();
 var _token = $('input[name="_token"]').val();
 $.ajax({
     url:"{{ route('cliente.getContatos') }}",
     method:"get",
     data:{value:value, _token:_token},
     success:function(result){
       console.log(result)//exibir o resultado da pesquisa no controller
       $("#contato").val(result[0]['contatos']);
       $("#cc").val(result[0]['cc']);
     }
  })
});

---

Route

Change of post for get (get pq you will only query the database and no change or insertion)

Route::get('getContatos', 'DashboardController@getContatos')->name('cliente.getContatos');

---

Controller

public function getContatos(Request $request) 
{
   $value = $request->get('value');

   $dadosCliente = DB::table('clients')
                       ->select('contatos','cc')
                       ->where('id', $value)
                       ->get();

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

Answer 2

I suggest you use an ajax using the event onChange() in select of clients. Below is an example:

<div id="respostaAjax"></div>
<script type="text/javascript">
    $("#cliente").change(function(){
        type:"POST",
        data: $(this).val(),
        url: 'link/que/pesquisa/os/contatos/para/este/cliente.php'
        success: function(data){
            $("#respostaAjax").empty();
            $("#respostaAjax").append(data);
        }
    })
</script>

After adding a <div> who had received the response of the ajax which in this case will be a select containing the contact details of the client you selected earlier. Any doubt I edit the answer to adapt to your need. Explain your need better so others can help you too.