Skip to main content

Tengo este formulario donde recibo los datos en una variable $user que proviene del controlador, muestro los datos en el formulario y cuando el usuario acciona el botón de enviar se envianenvían los datos mediante ajax.

Lo hago mediante AJAX, porque dentro del proyecto laravel tengo una API , la llamada la hace correctamente y los datos se actualizan correctamente.

Las dudas que tengo són, son las siguientes :

  • En el diseño html pongo el tag porque"form" porque de esta forma los input me cojen las validaciones, ejemplo : el campo de email comprueba que haya una "@"

  • El campo "active" que es de tipo checkbox recibe el valor 0/1 de $user pero no me modifica el aspecto (activado/desactivado)

  • Al no usar el form como tal y controlar el evento click del botón, si hay errores en los campos anteriores el evento se "dispara" de todas formas, como.
    ¿comó puedo controlar esto?

      @extends('layout-user')
    
      @section('content')
    
      <h3 class="mt-3">@lang('users.editar_usuario')</h3>
    
    
      <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}">
      </div>
      <div class="form-group">
          <label for="pwd">Documento de identidad:</label>
          <input type="document_type" class="form-control" name="document_type" id="document_type" value="{{$user->document_type}}">
      </div>
      <div class="checkbox">
          <label><input type="checkbox" name="active" value="{{$user->active}}">Activo</label>
      </div>
      <button type="submit" id="btn-save-user" class="btn btn-info">Guardar</button>
    
    
      <input type="hidden" name="user_id" value="{{ $user->id }}">
      <input type="hidden" name="_method" value="PUT">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    
       @endsection
    
       @section('script')
      <script>
          $("#btn-save-user").click(function() {
    
              var email =  $('#email').val();
              var document_type =  $('#document_type').val();
              var active =  $('#active').val();
              var user_id = {{ $user->id }}
    
              $.ajax({
                  url : '/api/users/' + user_id ,
                  data : { user_id : user_id, document_type : document_type, email : email, active: active },
                  type : 'PUT',
                  dataType : 'json',
                  success : function(json) {
                      console.log('success');
                  },
                  error : function(json , xhr, status) {
                      console.log('error');
                  },
                  complete : function(json , xhr, status) {
    
                  }
              });
    
          });
      </script>
    
      @endsection
    

Tengo este formulario donde recibo los datos en una variable $user que proviene del controlador, muestro los datos en el formulario y cuando el usuario acciona el botón de enviar se envian los datos mediante ajax.

Lo hago mediante AJAX porque dentro del proyecto laravel tengo una API , la llamada la hace correctamente y los datos se actualizan correctamente.

Las dudas que tengo són las siguientes :

  • En el diseño html pongo el tag porque de esta forma los input me cojen las validaciones, ejemplo : el campo de email comprueba que haya una "@"

  • El campo "active" que es de tipo checkbox recibe el valor 0/1 de $user pero no me modifica el aspecto (activado/desactivado)

  • Al no usar el form como tal y controlar el evento click del botón, si hay errores en los campos anteriores el evento se "dispara" de todas formas, como puedo controlar esto?

      @extends('layout-user')
    
      @section('content')
    
      <h3 class="mt-3">@lang('users.editar_usuario')</h3>
    
    
      <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}">
      </div>
      <div class="form-group">
          <label for="pwd">Documento de identidad:</label>
          <input type="document_type" class="form-control" name="document_type" id="document_type" value="{{$user->document_type}}">
      </div>
      <div class="checkbox">
          <label><input type="checkbox" name="active" value="{{$user->active}}">Activo</label>
      </div>
      <button type="submit" id="btn-save-user" class="btn btn-info">Guardar</button>
    
    
      <input type="hidden" name="user_id" value="{{ $user->id }}">
      <input type="hidden" name="_method" value="PUT">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    
       @endsection
    
       @section('script')
      <script>
          $("#btn-save-user").click(function() {
    
              var email =  $('#email').val();
              var document_type =  $('#document_type').val();
              var active =  $('#active').val();
              var user_id = {{ $user->id }}
    
              $.ajax({
                  url : '/api/users/' + user_id ,
                  data : { user_id : user_id, document_type : document_type, email : email, active: active },
                  type : 'PUT',
                  dataType : 'json',
                  success : function(json) {
                      console.log('success');
                  },
                  error : function(json , xhr, status) {
                      console.log('error');
                  },
                  complete : function(json , xhr, status) {
    
                  }
              });
    
          });
      </script>
    
      @endsection
    

Tengo este formulario donde recibo los datos en una variable $user que proviene del controlador, muestro los datos en el formulario y cuando el usuario acciona el botón de enviar se envían los datos mediante ajax.

Lo hago mediante AJAX, porque dentro del proyecto laravel tengo una API , la llamada la hace correctamente y los datos se actualizan correctamente.

Las dudas que tengo, son las siguientes :

  • En el diseño html pongo el tag "form" porque de esta forma los input me cojen las validaciones, ejemplo : el campo de email comprueba que haya una "@"

  • El campo "active" que es de tipo checkbox recibe el valor 0/1 de $user pero no me modifica el aspecto (activado/desactivado)

  • Al no usar el form como tal y controlar el evento click del botón, si hay errores en los campos anteriores el evento se "dispara" de todas formas.
    ¿comó puedo controlar esto?

      @extends('layout-user')
    
      @section('content')
    
      <h3 class="mt-3">@lang('users.editar_usuario')</h3>
    
    
      <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}">
      </div>
      <div class="form-group">
          <label for="pwd">Documento de identidad:</label>
          <input type="document_type" class="form-control" name="document_type" id="document_type" value="{{$user->document_type}}">
      </div>
      <div class="checkbox">
          <label><input type="checkbox" name="active" value="{{$user->active}}">Activo</label>
      </div>
      <button type="submit" id="btn-save-user" class="btn btn-info">Guardar</button>
    
    
      <input type="hidden" name="user_id" value="{{ $user->id }}">
      <input type="hidden" name="_method" value="PUT">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    
       @endsection
    
       @section('script')
      <script>
          $("#btn-save-user").click(function() {
    
              var email =  $('#email').val();
              var document_type =  $('#document_type').val();
              var active =  $('#active').val();
              var user_id = {{ $user->id }}
    
              $.ajax({
                  url : '/api/users/' + user_id ,
                  data : { user_id : user_id, document_type : document_type, email : email, active: active },
                  type : 'PUT',
                  dataType : 'json',
                  success : function(json) {
                      console.log('success');
                  },
                  error : function(json , xhr, status) {
                      console.log('error');
                  },
                  complete : function(json , xhr, status) {
    
                  }
              });
    
          });
      </script>
    
      @endsection
    
Origen Enlace
ilernet
  • 1.3k
  • 1
  • 28
  • 63

Laravel (blade) formulario con llamada ajax

Tengo este formulario donde recibo los datos en una variable $user que proviene del controlador, muestro los datos en el formulario y cuando el usuario acciona el botón de enviar se envian los datos mediante ajax.

Lo hago mediante AJAX porque dentro del proyecto laravel tengo una API , la llamada la hace correctamente y los datos se actualizan correctamente.

Las dudas que tengo són las siguientes :

  • En el diseño html pongo el tag porque de esta forma los input me cojen las validaciones, ejemplo : el campo de email comprueba que haya una "@"

  • El campo "active" que es de tipo checkbox recibe el valor 0/1 de $user pero no me modifica el aspecto (activado/desactivado)

  • Al no usar el form como tal y controlar el evento click del botón, si hay errores en los campos anteriores el evento se "dispara" de todas formas, como puedo controlar esto?

      @extends('layout-user')
    
      @section('content')
    
      <h3 class="mt-3">@lang('users.editar_usuario')</h3>
    
    
      <div class="form-group">
          <label for="email">Email:</label>
          <input type="email" class="form-control" id="email" name="email" value="{{$user->email}}">
      </div>
      <div class="form-group">
          <label for="pwd">Documento de identidad:</label>
          <input type="document_type" class="form-control" name="document_type" id="document_type" value="{{$user->document_type}}">
      </div>
      <div class="checkbox">
          <label><input type="checkbox" name="active" value="{{$user->active}}">Activo</label>
      </div>
      <button type="submit" id="btn-save-user" class="btn btn-info">Guardar</button>
    
    
      <input type="hidden" name="user_id" value="{{ $user->id }}">
      <input type="hidden" name="_method" value="PUT">
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    
    
       @endsection
    
       @section('script')
      <script>
          $("#btn-save-user").click(function() {
    
              var email =  $('#email').val();
              var document_type =  $('#document_type').val();
              var active =  $('#active').val();
              var user_id = {{ $user->id }}
    
              $.ajax({
                  url : '/api/users/' + user_id ,
                  data : { user_id : user_id, document_type : document_type, email : email, active: active },
                  type : 'PUT',
                  dataType : 'json',
                  success : function(json) {
                      console.log('success');
                  },
                  error : function(json , xhr, status) {
                      console.log('error');
                  },
                  complete : function(json , xhr, status) {
    
                  }
              });
    
          });
      </script>
    
      @endsection