Maison >interface Web >js tutoriel >Plusieurs façons de soumettre des formulaires en utilisant JavaScript

Plusieurs façons de soumettre des formulaires en utilisant JavaScript

黄舟original: 2017-11-18 14:53:2812633parcourir

Nous utilisons souvent des formulaires dans notre travail. Je pense que tout le monde les connaît. Il existe de nombreuses façons de soumettre des formulaires JavaScriptComment soumettre des formulaires ? Aujourd'hui, je vais vous présenter plusieurs méthodes de soumission. formulaires en JavaScript!

La première façon : Soumission du formulaire, ajoutez onsubmitévénement dans la balise form pour déterminer si la soumission du formulaire a réussi

<script type="text/javascript">
   function validate(obj) {
    if (confirm("提交表单?")) {
      alert(obj.value);
      return true;
    } else {
      alert(obj.value);
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net" onsubmit="return validate(document.getElementByIdx_x(&#39;myText&#39;));"> <!—参数的这种写法注意下-->
  
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
  
  </form>
</body>

La deuxième façon : Déclenchez l'événement de soumission du formulaire via le bouton boutononclick="submitForm();", qui ignorera les autres balises L'attribut , tel que l'attribut onsubmit dans la balise form, n'est pas valide. À ce stade, afin d'effectuer une vérification du formulaire, vous pouvez placer le code de vérification dans la méthode submitForm();

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
   
   function submitForm() {
    if (validate()) {
      document.getElementByIdx_x("myForm").submit();
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net" id="myForm">
  
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
  
  </form>
</body>

La troisième façon : Placez l'événement onsubmit dans la balise submit au lieu de la balise form. À ce stade, la vérification du formulaire échoue, cliquez sur le bouton. bouton de soumission Le formulaire est soumis directement

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
  
  </form>
</body>

La quatrième façon : Ajouter un événement onclick au bouton de soumission, où cet événement est utilisé pour la vérification du formulaire soumission, et la fonction est similaire à L'événement onsubmit est ajouté à la balise form comme

<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.jb51.net">
  
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
  
  </form>
</body>

La cinquième façon :

<body>
  <form action="http://www.jb51.net" id="myForm">
  
  <input type="text"/>
  <input type="button" value="submitBtn" id="myBtn"/>
  
  </form>
 </body>
 
  <script type="text/javascript">
  
   function validate() {
      if (confirm("提交表单?")) {
        return true;
      } else {
        return false;
      }
}

Déclenchez le formulaire via le bouton Soumettre l'événement onclick="submitForm();" ignorera les attributs des autres balises. Par exemple, l'attribut onsubmit dans la balise form sera invalide. À ce stade, afin d'effectuer la vérification du formulaire, le code de vérification peut être placé dans la méthode submitForm(); pour vérification

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

Résumé :

Grâce à l'introduction de cet article, nous savons qu'il existe de nombreuses façons de soumettre des formulaires en JavaScript. Chaque méthode est différente. Vous pouvez en choisir une en fonction de vos propres besoins. j'espère que cela sera utile à votre travail!

Recommandations associées :

Plusieurs méthodes et vérification de la soumission des formulaires à l'aide de JS

Le formulaire de soumission JS est rejeté par php, comment le résoudre ?

Une brève description de la façon de soumettre un formulaire en utilisant JavaScript (Utilisation du formulaire de soumission JavaScript)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：asm.js & webassembly-WEB calcul haute performanceArticle suivant：asm.js & webassembly-WEB calcul haute performance

Articles Liés

Voir plus