Heim > Web-Frontend > js-Tutorial > Hauptteil

Mehrere Methoden und Überprüfung der Übermittlung von Formularen mithilfe von JS

高洛峰
Freigeben: 2016-12-16 15:16:23
Original
1345 Leute haben es durchsucht

Ich habe bei der Arbeit festgestellt, dass die Übermittlung des Formulars unter IE in Ordnung war, aber unter Firefox traten Probleme auf, daher habe ich JS verwendet, um erfolgreich zu sein. . Auf Drängen des Dozenten habe ich die folgenden gängigen Methoden zur Formularübermittlung zusammengefasst.

Der erste Weg: Formularübermittlung, fügen Sie das onsubmit-Ereignis im Formular-Tag hinzu, um festzustellen, ob die Formularübermittlung erfolgreich ist

<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.php.cn" onsubmit="return validate(document.getElementByIdx_x(&#39;myText&#39;));"> <!—参数的这种写法注意下-->
   
    <input type="text" id="myText"/>
    <input type="submit" value="submit"/>
   
  </form>
</body>
Nach dem Login kopieren

Der zweite Weg: Lösen Sie das Formularübermittlungsereignis onclick durch aus button button="submitForm();" ignoriert beispielsweise die Attribute in anderen Tags. Das onsubmit-Attribut im Formular-Tag ist ungültig. Zu diesem Zeitpunkt kann zur Durchführung der Formularüberprüfung der Bestätigungscode zur Überprüfung in die Methode „submitForm()“ eingefügt werden.

<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.php.cn" id="myForm">
   
    <input type="text"/>
    <input type="button" value="submitBtn" onclick="submitForm();"/> <!—也可以使用document.getElementByIdx_x(“该按钮的id”).click();来执行onclick事件-->
   
  </form>
</body>
Nach dem Login kopieren

Der dritte Weg: Fügen Sie das Onsubmit-Ereignis in das Submit-Tag anstelle des Formular-Tags ein. Klicken Sie zu diesem Zeitpunkt auf die Schaltfläche „Senden“, um das Formular direkt zu senden >

Der vierte Weg: Fügen Sie der Schaltfläche „Senden“ ein Onclick-Ereignis hinzu, wobei dieses Ereignis zur Überprüfung der Formularübermittlung verwendet wird. Die Funktion ähnelt dem Hinzufügen eines Onsubmit-Ereignisses im Formular-Tag Fünfter Weg:
<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.php.cn">
   
    <input type="text"/>
    <input type="submit" value="submit" onsubmit="return validate()"/>
   
  </form>
</body>
Nach dem Login kopieren

Wenn Sie das Formularübermittlungsereignis onclick="submitForm();" über die Schaltfläche auslösen, werden die Attribute in anderen Tags ignoriert. Beispielsweise ist das onsubmit-Attribut im Formular-Tag ungültig . Zu diesem Zeitpunkt können Sie zur Durchführung der Formularüberprüfung den Bestätigungscode in die Methode subscribeForm(); einfügen.
<script type="text/javascript">
   function validate() {
    if (confirm("提交表单?")) {
      return true;
    } else {
      return false;
    }
   }
 </script>
 <body>
  <form action="http://www.php.cn">
   
    <input type="text"/>
    <input type="submit" value="submit" onclick="return validate()"/>
   
  </form>
</body>
Nach dem Login kopieren

<body>
  <form action="http://www.php.cn" 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;
      }
}
Nach dem Login kopieren

Weitere Möglichkeiten zum Senden von Formularen mit JS und Für verifizierungsbezogene Artikel beachten Sie bitte die chinesische PHP-Website!
function submitForm() {
      if (validate()) {
        document.getElementByIdx_x("myForm").submit();
      }
   }
   
   document.getElementByIdx_x("myBtn").onclick = submitForm;
</script>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage