0

El problema es que no me ejecuta el ajax, ya que me falla algo en la validacion, el error que me da es el siguiente:

TypeError: document.getElementById(...) 

Aquí va el código:

function validar() {
  var res = true;

Error en esta línea

  if (document.getElementById("tema").value === "" || document.getElementById("experiencia").value === "" ||
    document.getElementById("tiempo").value === "") {
    res = false;
  }
  if (!res) {
    alert('Debes seleccionar todos los campos');
  }
  return res;
}
//Envio datos del formulario mediante ajax

Y error al intentar acceder al ajax

if (validar()) {
  $(document).ready(function() {
    $("#enviar").click(function() {
      var datos = $("form").serialize(); //serialize recoge los values del formulario, identificados por su name
      $.ajax({
          type: "POST",
          url: "guardarDatos.php",
          data: datos
        })
        .done(function(response) {
          if (response.success) {
            alert("Fallo con la Base de Datos");
          }
        })
        .fail(function() {
          alert("error");
        });
    });
  });
}

Aqui os dejo el formulario

<form id="form" onsubmit="return validar()" method="POST" action="index.php">
    <select id="tema" name="tema">
        <option value="">¿En qué tema estás interesado?</option>
        <option>Programación</option>
    </select>
    <select id="experiencia" name="experiencia">
        <option value="">¿Qué experiencia tienes?</option>
        <option>Sin experiencia</option>
    </select>
    <select id="tiempo" name="tiempo">
        <option value="">¿De que tiempo dispones?</option>
        <option>1-3 horas al día</option>
    </select>
    </br>
    <input type="submit" value="ENCUENTRA TU FORMACIÓN AHORA" id="enviar "name="enviar">
</form>

Supongo que el error es en la parte de javascript que no realizo los pasos correctamente

1 respuesta 1

1

En tu código hay básicamente un problema de organización. Pero también hay malas prácticas y un error de sintaxis que hace inválido tu formulario.

Para organizar mejor el código, en la función validar() puedes emitir el mensaje desde dentro del if. No tienes que volver a hacer otro if. Es redundante.

En el código HTML estabas cerrando un elemento así: </br>, lo cual produce un HTML erróneo. Debes ponerlo así: <br> o bien así <br />

Evita también las funciones in line. Tu escucha del submit del formulario usaba una función in line en ese sentido y al mismo tiempo en jQuery estabas escuchando el click del input submit del formulario. Todo eso es mala práctica, es redundante y es confuso. Simplemente escucha el submit del formulario en sí y basta. Esto se hace mediante $("#form").on('submit', function(e) {. En ese bloque hemos implementado además preventDefault() para evitar que la página se recargue al mandar el form.

Había otra mala implementación y es que estabas llamando a validar() fuera del bloque que supuestamente debía escuchar el submit del formulario, cuando realmente validar() debería ser llamado una vez el formulario haya sido enviado.

En el serialize también convendría que seas más específico, usando un identificador poe el id del elemento mediante #form.

Por último, $(document).ready(function() { es obsoleto desde jQuery 3 y posiblemente sea sacado del núcleo de jQuery 4, debes dar preferencia al uso de $( function() { a partir de ahora en todo tu código jQuery.

function validar() {
  var res = true;
  if (document.getElementById("tema").value === "" || document.getElementById("experiencia").value === "" ||
    document.getElementById("tiempo").value === "") {
    res = false;
    alert('Debes seleccionar todos los campos');
  }
  return res;
}
//Envio datos del formulario mediante ajax
$( function() {
  //Es mejor esuchar el submit del form directamente
  $("#form").on('submit', function(e) {
    //Con esto evitamos que la página se recargue al hacer submit
    e.preventDefault();
    if (validar()) {
      var datos = $("#form").serialize(); //serialize recoge los values del formulario, identificados por su name
      $.ajax({
          type: "POST",
          url: "guardarDatos.php",
          data: datos
        })
        .done(function(response) {
          if (response.success) {
            alert("Fallo con la Base de Datos");
          }
        })
        .fail(function() {
          alert("error");
        });
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form" method="POST" action="index.php">
  <select id="tema" name="tema">
    <option value="">¿En qué tema estás interesado?</option>
    <option>Programación</option>
  </select>
  <select id="experiencia" name="experiencia">
    <option value="">¿Qué experiencia tienes?</option>
    <option>Sin experiencia</option>
  </select>
  <select id="tiempo" name="tiempo">
    <option value="">¿De que tiempo dispones?</option>
    <option>1-3 horas al día</option>
  </select>
  <br />
  <input type="submit" value="ENCUENTRA TU FORMACIÓN AHORA" id="enviar " name="enviar">
</form>

2
  • Gracias por tu ayuda, me has ayudado mucho con tus consejos.
    – Master
    Commented el 6 mar. 2020 a las 18:13
  • @Master me alegro si te ha servido. Había otra cosa: considera usar un selector más específico para serializar: var datos = $("#form").serialize();, ahí se serializará el formulario por su id, esto es útil en el caso de que tuvieras más de un formulario. He mejorado la respuesta con esa corrección. Si te ha servido para resolver el problema la puedes marcar como resuelta para utilidad de otros.
    – A. Cedano
    Commented el 6 mar. 2020 a las 18:17

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.