es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Tengo este código de formulario ajax que ha fallado al funcionar.

27 May, 2023 Programación

La parte del formulario funciona correctamente sola, pero al agregar el ajax todo deja de funcionar y el navegador simplemente se refresca.

<form id="myform">
   <input type="hidden" name="amount" value="5">
   <input type="text" name="to">
   <button type="submit">Ir</button>
</form>

<script>
    const myForm = document.getElementById("myForm");

    myForm.addEventListener("submit",(e) = >{
       e.preventDefault();

       const request = new XMLHttpRequest();

       request.open("post", "https://faucetpay.io/api/v1/send");

       request.onload = function (){
           console.log(request.responseText);
       }

       request.send(new Formdata(myForm));
    });
</script>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Hay un error de escritura en el código: el ID del formulario en el HTML es “myform”, mientras que en JavaScript es “myForm”. Esto puede estar causando el problema porque JavaScript no puede encontrar el formulario correctamente. Además, el constructor “FormData” está escrito con una “F” mayúscula en JavaScript, lo que también podría estar causando problemas.

    Para solucionar estos problemas, actualice JavaScript para usar la identificación del formulario correcta (en este caso, “myform”) y use la ortografía correcta para el constructor “FormData” (con una “f” minúscula). Esto permitirá que la solicitud AJAX funcione correctamente sin que el navegador se actualice:

    <form id="myform">
  <input type="hidden" name="amount" value="5">
  <input type="text" name="to">
  <button type="submit">Ir</button>
</form>

<script>
  const myForm = document.getElementById("myform");

  myForm.addEventListener("submit", (e) => {
    e.preventDefault();

    const request = new XMLHttpRequest();

    request.open("post", "https://faucetpay.io/api/v1/send");

    request.onload = function() {
      console.log(request.responseText);
    }

    request.send(new FormData(myForm));
  });
</script>

Comments are closed.