0

Quisiera saber si hay alguna forma de formatear un formulario, hasta ahora he avanzado esto pero no se resetea el formulario.

tengo un formulario llamado formprincipal y me estoy rompiendo la cabeza trantando de encontrar la forma que si se realiza un registro de manera satisfactoria me limpie el formulario completo con el reset, nosé si talvez sea valido hacer el reset en la parte del success del ajax, la verdad nosé como hacerlo :(

function compfisico2() {
    var formulario = $("#formprincipal").serialize();
    var pardni = $("#frd1").val();    
    var parconcept = $("#cbopago").val();
    var parmes = $("#cbomes").val();
    var parmonto = $("#frd2").val();
    var pardetalle = $("#textarea1").val();
    
    if(pardni.length==0 || parmonto.length==0){
        alert("Los campos que tengan (*) son obligatorios");
    }
    var formData= new FormData();
    
    formData.append('frd1',pardni);    
    formData.append('cbopago',parconcept);
    formData.append('cbomes',parmes);
    formData.append('frd2',parmonto);
    formData.append('textarea1',pardetalle);
    $.ajax({
        url:'ajxcons/grabarcomp2.php',
        type:'post',
        data:formData,
        contentType:false,
        processData:false,
        success: function(respuesta){
            if (respuesta=="Archivo enviado correctamente") {
                                
                M.toast({html: respuesta});
                formulario.reset();
                
            } else {
                M.toast({html: respuesta});   
            }            
        }
    });
    
    return false;
    
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

1
  • Podrías limpiar tus forms agregándole valores vacíos => $("#frd1").val(""), $("#cbopago").val(""), etc.... Aunque más dinámico sería que crees una función y agregar este código que te comento (para todos tus forms) y solo llamas a la función cuando ocurre el success. el 19 dic. 2022 a las 0:26

2 respuestas 2

0

Podrías setear tus formularios agregándole valores vacíos:

function compfisico2() {
  // var formulario = $("#formprincipal").serialize();
  var pardni = $("#frd1").val();
  var parconcept = $("#cbopago").val();
  var parmes = $("#cbomes").val();
  var parmonto = $("#frd2").val();
  var pardetalle = $("#textarea1").val();

  if (pardni.length == 0 || parmonto.length == 0) {
    alert("Los campos que tengan (*) son obligatorios");
  }
  var formData = new FormData();

  formData.append('frd1', pardni);
  formData.append('cbopago', parconcept);
  formData.append('cbomes', parmes);
  formData.append('frd2', parmonto);
  formData.append('textarea1', pardetalle);
  $.ajax({
    url: 'ajxcons/grabarcomp2.php',
    type: 'post',
    data: formData,
    contentType: false,
    processData: false,
    success: function (respuesta) {
      if (respuesta == "Archivo enviado correctamente") {

        M.toast({ html: respuesta });
        // formulario.reset();
        $("#frd1").val("");
        $("#cbopago").val("");
        $("#cbomes").val("");
        $("#frd2").val("");
        $("#textarea1").val("");
      } else {
        M.toast({ html: respuesta });
      }
    }
  });

  return false;
}

O también llamando a una función que setee a los formularios a vacío (en lo personal, recomendaría este):

function compfisico2() {
  // var formulario = $("#formprincipal").serialize();
  var pardni = $("#frd1").val();
  var parconcept = $("#cbopago").val();
  var parmes = $("#cbomes").val();
  var parmonto = $("#frd2").val();
  var pardetalle = $("#textarea1").val();

  if (pardni.length == 0 || parmonto.length == 0) {
    alert("Los campos que tengan (*) son obligatorios");
  }
  var formData = new FormData();

  formData.append('frd1', pardni);
  formData.append('cbopago', parconcept);
  formData.append('cbomes', parmes);
  formData.append('frd2', parmonto);
  formData.append('textarea1', pardetalle);
  $.ajax({
    url: 'ajxcons/grabarcomp2.php',
    type: 'post',
    data: formData,
    contentType: false,
    processData: false,
    success: function (respuesta) {
      if (respuesta == "Archivo enviado correctamente") {

        M.toast({ html: respuesta });
        // formulario.reset();
        reset();
      } else {
        M.toast({ html: respuesta });
      }
    }
  });

  return false;
}

function reset() {
  $("#frd1").val("");
  $("#cbopago").val("");
  $("#cbomes").val("");
  $("#frd2").val("");
  $("#textarea1").val("");
}
0

En el success dentro de la validación con la condicional IF coloca el metodo trigger() de JQuery con opción reset, quedando de la siguiente manera:

success: function(response){
        if (response == true) {
            $('#el_formulario').trigger('reset')
            return;
        }
        // Otra cosa por hacer, puede ser el código del else, evitas usar el else de manera directa
    }

Lo que hara es "resetar" o vaciar los campos del formulario deseado, revisa la documentación de JQuery pero sería todo el form, si solo ocupas ciertos campos, codifica una función de la manera:

function resetarCamposForm () {
    $('#campo_resetar1').val('');
    $('#campo_resetar2').val(''); // Así todos los que ocupes
}

o de la manera con una clase:

function resetarCamposForm () {
    $('.campo_nombre_clase').val(''); // Agregale la clase a todos 
    los campos que ocupes resetear, es otra manera
}

Y esta función la llamas dentro del IF si la response es verdadera, sustituyendo al método trigger de jQuery

Consejos:

  • Agrega la devolución de llamada fail() de las peticiones AJAX, para notificar posibles errores
  • Las devoluciones de llamada jqXHR.success (), jqXHR.error () y jqXHR.complete () se eliminan a partir de jQuery 3.0. Puede utilizar jqXHR.done (), jqXHR.fail () y jqXHR.always () en su lugar.

Esto quiere decir que desde jQuery 3 se recomienda usar done en lugar de success, revisa la pregunta ¿Cual es la diferencia entre success y done?

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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