Varias formas de enviar formularios con JS y validación (artículo obligatorio)

En el trabajo se encontraron problemas con el envío de formularios, muchas veces funciona bien en IE, pero cuando se usa Firefox, surge un problema, y al usar el botón de envío no funciona, por lo que se utilizó el método JS que funcionó, no se sabe por qué. Bajo la presión del tutor, se resumieron las siguientes formas comunes de envío de formularios.

Primera manera:Enviar formulario, agregar el evento onsubmit en el etiqueta form para determinar si el envío del formulario ha sido exitoso

<script type="text/javascript">
   function validate(obj) {
    if (confirm("Enviar formulario"63;")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="https://es.oldtoolbag.com" onsubmit="return validate(document.getElementByIdx_x('myText'));"> ¡Notar esta forma de escribir los parámetros!-->
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  </form>
</body>

Segunda manera:Al usar el botón button para desencadenar el evento de envío del formulario onclick="submitForm();", se ignoran las propiedades de otros etiquetas, como la propiedad onsubmit del etiqueta form que se desactiva. En este caso, para realizar la validación del formulario, se puede poner el código de validación en el método submitForm();

<script type="text/javascript">
   function validate() {
    if (confirm("Enviar formulario"63;")) {
      return true;
    } else {
      return false;
    }
   }
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="https://es.oldtoolbag.com" id="myForm">
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> ¡También se puede usar document.getElementByIdx_x(“id_del_botón”).click(); para ejecutar el evento onclick-->
  </form>
</body>

Tercera manera:Colocar el evento onsubmit en el etiqueta submit, en lugar del etiqueta form, en este caso la validación del formulario no funcionará y al hacer clic en el botón submit, el formulario se enviará directamente

<script type="text/javascript">
   function validate() {
    if (confirm("Enviar formulario"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://es.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  </form>
</body>

Cuarta manera:Agregar el evento onclick al botón submit, que se utiliza para la validación del envío del formulario, similar a agregar el evento onsubmit en el etiqueta form

<script type="text/javascript">
   function validate() {
    if (confirm("Enviar formulario"63;")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="https://es.oldtoolbag.com">
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  </form>
</body>

Quinto método:

<body>
  <form action="https://es.oldtoolbag.com" id="myForm">
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  </form>
 </body>
  <script type="text/javascript">
   function validate() {
      if (confirm("Enviar formulario"63;")) {
        return true;
      } else {
        return false;
      }
}

Al hacer clic en el botón de button para activar el evento de envío de formulario onclick="submitForm();", se ignorarán otras etiquetas de atributos, como el atributo onsubmit de la etiqueta form, que se desactivará. En este momento, para realizar la verificación del formulario, se puede poner el código de verificación en el método submitForm();

function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>

La siguiente publicación sobre varios métodos y verificaciones de envío de formularios utilizando JS (obligatorio) es todo lo que el editor comparte con ustedes, espero que les sea útil y esperamos que apoyen más a la tutorial de grito.

Tutoriales básicos

Te gustará