0

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
    
1
  • 1
    solo valida <input type="checkbox" {{ $user->active ? 'cheked' : '' }}> ahora con 1 mostrara el checked y si es 0 mostra unchecked!
    – Bryro
    Commented el 29 ene. 2020 a las 17:24

2 respuestas 2

2

Creo que ya tienes idea de por que pasa eso, estas controlando el evento del boton, no de la forma. Mencionas que utilizas el tag de form, pero no lo veo en el HTML, voy a asumir que es un typo.

Si tienes una forma

<form id="target" action="destination.html">
  <input type="text" value="Hello there">
  <input type="submit" value="Go">
</form>

Puedes controlar el evento submit

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

event.preventDefault(); evita que se envia la forma por el metodo tradicional y a partir de ahi puedes usar la funcion de ajax/

Tu metodo podria quedar asi

$("#form-id").submit(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) {

        }
    });
});

Para la solucion del checkbox mira lo que escribio Bryro, es mas compacto y legible

1
  • Muchas gracias por la respuesta. Muy amable :)
    – ilernet
    Commented el 30 ene. 2020 a las 10:11
1

Respecto al campo active puedes poner un condicional. Ejemplo

@if($user->active == 1)
  <div class="checkbox">
      <label><input type="checkbox" name="active" value="  {{$user->active}}">desactivo</label>
  </div>
@else
<div class="checkbox">
      <label><input type="checkbox" checked name="active" value="  {{$user->active}}">Activo</label>
</div>  
@endif

Respecto a si hay errores en los campos, Puedes utilizar validaciones con Jquery de esos campos, utilizando Validaciones Jquery

1
  • Muchas gracias por la respuesta. Muy amable :)
    – ilernet
    Commented el 30 ene. 2020 a las 10:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.