La différence entre les fonctions onclick et onsubmit

La différence entre les fonctions onclick et onsubmit

onsubmit ne peut être utilisée que sur les formulaires et sera déclenchée avant la soumission du formulaire, onclick est utilisé par des contrôles tels que les boutons pour. déclencher des événements de clic.

Avant de soumettre le formulaire, une vérification des données est généralement effectuée. Vous pouvez choisir de vérifier en onclick sur le bouton soumettre ou en onsubmit.

Mais onclick est déclenché plus tôt que onsubmit

1 L'utilisateur clique sur le bouton——>

2 L'événement onclick est déclenché——>

.

3. onclick renvoie vrai ou onclick n'est pas traité —->

4 Déclenche l'événement onsubmit —->

5. >

6. Soumettez le formulaire.

 onsubmit处理函数返回false，onclick函数返回false，都不会引起表单提交。

---

Le premier type : onsubmit

bloc de code

<script language="javascript">
   function CheckPost ()
   {
      if (addForm.user.value == "")
      {
          alert("请填写用户名！");
          addForm.username.focus();          
          return false;
      }     
      if (addForm.title.value.length < 5)
     {
          alert("标题不能少于5个字符！");
          addForm.title.focus();          
          return false;
     }     return true;
   }
   </script>
   
   <form action="test.php" method="post" name="addForm"  onsubmit="return CheckPost();">
     <p>用户:<input type="text" size="10" name="user" maxlength="20"/></p>
     <p>标题:<input type="text" name="title" maxlength="50"/></p>
     <p>内容:<textarea name="content" rows="8" cols="30"></textarea></p>
     <p>
           <input type="submit" name="submit" value="发表留言"/>
     </p>
   </form>

Le deuxième type : onclick

<script language="javascript">
 2     function SendForm () 
 3     {
 4         if(CheckPost()) 
 5         { 
 6             document.addForm.submit(); 
 7         } 
 8     } 
 9 
 10     function CheckPost () 
 11     {
 12          if (addForm.user.value == "") 
 13          {
 14                alert("请填写用户名！");
 15                addForm.username.focus();
 16                return false;
 17          }
 18          if (addForm.title.value.length < 5) 
 19          {
 20                alert("标题不能少于5个字符！");
 21                addForm.title.focus();
 22                return false;
 23          }
 24          return true;
 25     }
 26 </script>
 27 
 28 <form action="test.php" method="post" name="addForm">
 29      <p>用户:<input type="text" size="10" name="user" maxlength="20"/></p>
 30      <p>标题:<input type="text" name="title" maxlength="50"/></p>
 31      <p>内容:<textarea name="content" rows="8" cols="30"></textarea></p>
 32      <p><input type="button" name="submit" value="发表留言" onclick="SendForm();"/></p>
 33 </form>

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!