onClick funktionierte nicht im Formular? Normalerweise

Question

Ich sehe Menschen Formular erstellen Eingang:

<form action=""> 
<table> 
    <tr> 
     <td><label for="Fname">First Name</label></td> 
     <td><input type="text" name="Fname" class="form-control" id="fname"></td> 
    </tr> 
    <tr> 
     <td><label for="Lname">Last Name</label></td> 
     <td><input type="text" name="Lname" class="form-control" id="lname"></td> 
    </tr> 
    <tr> 
     <td><label for="address">address</label></td> 
     <td><input type="text" name="address" class="form-control" id="address"></td> 
    </tr> 
    <tr> 
     <td><label for="phone">phone</label></td> 
     <td><input type="text" name="phone" class="form-control" id="phone"></td> 
    </tr> 
    <tr> 
     <td><input type="submit" value="submit" onclick="submit();"></td> 
    </tr> 
</table> 
</form> 

Es ist meine machen Submit-Button nicht funktioniert, aber sobald ich das Formular-Tag entfernen, es ist Arbeit:

<table> 
    <tr> 
     <td><label for="Fname">First Name</label></td> 
     <td><input type="text" name="Fname" class="form-control" id="fname"></td> 
    </tr> 
    <tr> 
     <td><label for="Lname">Last Name</label></td> 
     <td><input type="text" name="Lname" class="form-control" id="lname"></td> 
    </tr> 
    <tr> 
     <td><label for="address">address</label></td> 
     <td><input type="text" name="address" class="form-control" id="address"></td> 
    </tr> 
    <tr> 
     <td><label for="phone">phone</label></td> 
     <td><input type="text" name="phone" class="form-control" id="phone"></td> 
    </tr> 
    <tr> 
     <td><input type="submit" value="submit" onclick="submit();"></td> 
    </tr> 
</table> 

Meine js nur wie folgt:

var Fname= document.getElementById("fname"); 
var Lname= document.getElementById("lname"); 
var Address= document.getElementById("address"); 
var Phone= document.getElementById("phone"); 
var Result= document.getElementById("result"); 


function submit(){ 
    var valueFname=Fname.value; 
    var valueLname=Lname.value; 
    var valueAddress=Address.value; 
    var valuePhone=Phone.value; 
    Result.innerHTML="hello, "+valueFname+" "+valueLname+" good to see you. Your contact number is "+valuePhone+" , and your address "+valueAddress; 
} 

Warum kann ich nicht alle meine Eingaben in das Formular schreiben? Braucht es zusätzlichen Code?

Answer 1

sein Make my-Taste funktioniert nicht

einreichen Nein, Ihr Submit-Button funktioniert prima. Darin liegt das Problem, das Sie tatsächlich sehen. Ihr JavaScript-Code wird ausgeführt, aber die Zeit zwischen dem Anzeigen einer Ausgabe und dem erneuten Laden der Seite, da Sie ein Formular abgeschickt haben, ist fast augenblicklich.

So funktioniert Ihr JavaScript. Und deine Form funktioniert. Funktioniert alles.

aber sobald ich das Formular-Tag seine Arbeit

Nicht ganz zu entfernen. Wenn Sie den Tag form entfernen, funktioniert die Formularübergabe nicht mehr. Sie haben lediglich verhindert, dass das Formular übermittelt wird, weil Sie kein Formular mehr haben.

Warum kann ich nicht alle meine Eingaben in Form verpacken?

Sie können. Aber es hängt wirklich davon ab, was Sie versuchen zu tun. Wenn Sie ein Formular haben und es übermitteln möchten, verwenden Sie ein form Element. Wenn Sie nichts als Formular einreichen möchten, können Sie es weglassen. Das ist der einzige Zweck.

Sie können Eingaben auf der Seite haben, wo Sie möchten, sie müssen nicht in Formularen sein. Wenn Sie nur mit JavaScript interagieren möchten, können Sie dies ohne ein form Element tun.

Answer 2

Formulare werden erstellt, um HTTP-Methoden (wie POST oder PUT) zu erstellen. Also, wenn Sie brauchen, dass die Informationen dieser Eingabe an einer HTTP-Methode teilnehmen, müssen Sie das Formular verwenden. Wenn Ihre Schaltfläche "Senden" nur für interne Zwecke erstellt wurde, verwenden Sie kein Formular.

Etwas mehr Informationen: enter link description here

Answer 3

Formular werden die Daten in die Datei in Aktion angegeben senden und dieses Ereignis wird von <input type="submit"/> innerhalb eines Formulars ausgelöst.

Sie können ein <button> Tag innerhalb Formular verwenden, um zu erreichen, was Sie wollen.

Answer 4

Sie müssen die Aktion für Ihr Formular festlegen, es ist leer.
Oder Sie können jQuery