Heim > Web-Frontend > js-Tutorial > Hauptteil

Welche Möglichkeiten gibt es, Formulare in JavaScript einzureichen?

清浅
Freigeben: 2019-02-28 16:10:58
Original
8798 Leute haben es durchsucht

Es gibt drei Möglichkeiten, Formulare in JavaScript zu senden: Formularübermittlung direkt über die Schaltfläche „Senden“, Formularübermittlung über die Schaltfläche, die das Onclick-Ereignis auslöst, Formularübermittlung, ausgelöst durch die Schaltfläche „Senden“ beim Onsubmit-Ereignis

Formular ein Die Seite „Einreichen“ ist eine sehr gängige Methode. In diesem Artikel werde ich verschiedene Methoden zur Implementierung von Formularen vorstellen. Ich hoffe, dass sie für alle hilfreich sind

[Empfohlene Kurse: Welche Möglichkeiten gibt es, Formulare in JavaScript einzureichen?

Javascript-Tutorial]Methode 1

Verwenden Sie die Schaltfläche „Senden“, um den Effekt der Formularübermittlung zu erzielen

Beispiel:

<form action="demo.asp" method="post">
    First name:<br>
    <input type="text" name="firstname" value="Mickey"><br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse"><br><br>
    <input type="submit" value="提交">
</form>
<script>
/*这里是提交表单前的非空校验*/
    $("form").submit(function () {
        var first = $("input[name=&#39;firstname&#39;]").val();
        var last = $("input[name=&#39;lastname&#39;]").val();
        if (first == "" || first == null || first == undefined) {
            alert("first");
            return false;/*阻止表单提交*/
        } else if (last == "" || last == null || last == undefined) {
            alert("last");
            return false;/*阻止表单提交*/
        } else {
            alert("提交");
            return true;
        }
    })
</script>
Nach dem Login kopieren

Wie im obigen Code gezeigt, wenn wir auf „Senden“ klicken Klicken Sie auf die Schaltfläche, die Formulardaten werden an die Seite mit dem Namen demo.asp gesendet. Die über die Schaltfläche „Senden“ implementierte Formularübermittlung ist die direkte Übermittlung. Wir können jedoch einige Methoden verwenden, um die Notwendigkeit der Formularübermittlung zu überprüfen oder die Formularübermittlung gemäß unseren eigenen benutzerdefinierten Anforderungen durchzuführen


Methode 2

Sie können die Schaltfläche verwenden Um die Formularübermittlung zu implementieren, wird beim Klicken auf die Schaltfläche das Onclick-Ereignis ausgelöst und die Funktion in JavaScript ermittelt, ob der Eingabeinhalt leer ist. Wenn er leer ist, wird false zurückgegeben und die Formularübermittlung erfolgt zu diesem Zeitpunkt nicht . Wenn es nicht leer ist, wird das Formular an die durch Aktion angegebene Adresse gesendet.

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                  document.myform.submit();
            }
    </script>
<form action="demo.asp" name="myform" method="post">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=button name="submit1" value="登陆" onclick="check(this.form)">  
</form>
Nach dem Login kopieren
Hinweis: Da bei dieser Methode die Schaltfläche keine automatische Übermittlungsfunktion hat, wird die Übermittlung durch JavaScript-Anweisungen implementiert

Methode 3

Bestanden Verwenden Sie die Schaltfläche „Senden“, um das Formular abzuschicken. Wenn wir auf die Schaltfläche „Senden“ klicken, wird zuerst das Ereignis „onsubmit“ ausgelöst, und dann ermittelt die Funktion in JavaScript, ob der Eingabeinhalt leer ist. Wenn der Eingabeinhalt leer ist, wird „false“ zurückgegeben und das Formular wird nicht gesendet. Wenn der Eingabeinhalt nicht leer ist, senden Sie ihn an die durch Aktion

<script type="text/javascript">
         function check(form) {
              if(form.userId.value==&#39;&#39;) {
                    alert("请输入用户帐号!");
                    form.userId.focus();
                    return false;
               }
               if(form.password.value==&#39;&#39;){
                    alert("请输入登录密码!");
                    form.password.focus();
                    return false;
                }
                return true;
         }
</script>
<form action="demo.asp act=login" method="post" onsubmit="return check(this)">
    用户帐号<input type=text name="userId" size="18" value="" ><br>
    登录密码<input type="password" name="password" size="19" value=""/>      
    <input type=submit name="submit1" value="登陆"> 
</form>
Nach dem Login kopieren
angegebene Adresse. Zusammenfassung: Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, verschiedene Möglichkeiten zum Senden von Formularformularen zu erlernen.

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, Formulare in JavaScript einzureichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage