PHP - Ayuda: quiero mostrar el precio al seleccionar un producto. tengo eso del ajax.

@extends('layout')

@section('contenido')

<div class=" main-panel content">

  <div class="container-fluid">

    <div class="row">

      <div class="col-md-12">

        <div class="card">

          <div class="card-header card-header-primary">

            <h4 class="card-title">Venta</h4>

            <p class="card-category">Realizar una Venta</p>

          </div>

          <div class="card-body">

          <div class="card-body">

            @if ($errors->any())

            <div class="alert alert-danger">

              <ul>

                @foreach($errors->all() as $error)

                <li>{{$error}}</li>

                @endforeach

              </ul>

            </div>

            @endif

            <form action="{{route('venta.store')}}" method="post">  @cs

              <div class="row">

                <div class="col-md-3">

                  <div class="form-group">

                  </div>

                  <div class="form-group">

                    <label class="bmd-label-floating">Informacion Produ

                  </div>

                </div>

              </div>

              <div class="row">

                <div class="col-md-4">

                  <div class="form-group">

                    <label class="bmd-label-floating">Seleccionar Produ

        <select  name="id_producto" class="custom-select" require oncha

                      <option selected=""> Seleccionar Producto</option

                      @foreach ($productos as $producto)

                      <option value="{{$producto->id}}">

                        {{$producto->id}} {{$producto->nombre}}, ${{$pr

                      </option>

                      @endforeach

                     </select>

                  </div>

                  </script>

                </div>

                <div class="col-md-4">

                  <div class="form-group">

                    <label class="bmd-label-floating">Precio</label>

                    <input type="text" id="precio" name="precio" class=

                  </div>

                </div>

              </div>

              <button type="submit" class="btn btn-primary">Realizar ve

            </form>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>

@endsection

@section('script')

<script type="text/javascript">

  function estafuncion(valor) {

    $.ajax({

      URL: "{{route('venta.create')}}",

      type: "POST",

      data: {valor: valor },

      dataType: 'json',

      success: function(json) {

        var js=json.json;

        alert('precio'+join.precio);

        document.getElementById("precio").value=json.precio;

        echo (json.precio);

      }

    });

  }

</script>

@endsection

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 public function getPrecio(){

 $valor=$_POST['valor'];

 //esta variable es para retornar los datos

 $jsondata = array();

 //la consulta que necesites para trer el codigo y el nombre del cliente

 $query=producto::find($valor);

 $precio=$query['precio'];

 //agregamos nuestros datos al array para retornarlos

 $jsondata['precio'] = $precio;

 //este header es para el retorno correcto de datos con json

  header('Content-type: application/json; charset=utf-8');

  echo json_encode($jsondata);    return "Hola";

  }