So verhindern Sie, dass Schaltflächen Formulare senden

917

Auf der folgenden Seite sendet die Schaltfläche "Entfernen" bei Firefox das Formular, die Schaltfläche "Hinzufügen" jedoch nicht. Wie verhindere ich, dass die Schaltfläche zum Entfernen das Formular sendet?

<html>

<head>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        function addItem() {
            var v = $('form :hidden:last').attr('name');
            var n = /(.*)input/.exec(v);

            var newPrefix;
            if (n[1].length == 0) {
                newPrefix = '1';
            } else {
                newPrefix = parseInt(n[1]) + 1;
            }

            var oldElem = $('form tr:last');
            var newElem = oldElem.clone(true);
            var lastHidden = $('form :hidden:last');

            lastHidden.val(newPrefix);

            var pat = '=\"' + n[1] + 'input';

            newElem.html(newElem.html().replace(new RegExp(pat, 'g'), '=\"' + newPrefix + 'input'));
            newElem.appendTo('table');
            $('form :hidden:last').val('');
        }

        function removeItem() {
            var rows = $('form tr');
            if (rows.length > 2) {
                rows[rows.length - 1].html('');
                $('form :hidden:last').val('');
            } else {
                alert('Cannot remove any more rows');
            }
        }
    </script>
</head>

<body>
    <form autocomplete="off" method="post" action="">
        <p>Title:<input type="text" /></p>
        <button onclick="addItem(); return false;">Add Item</button>
        <button onclick="removeItem(); return false;">Remove Last Item</button>
        <table>
            <th>Name</th>

            <tr>
                <td><input type="text" id="input1" name="input1" /></td>
                <td><input type="hidden" id="input2" name="input2" /></td>
            </tr>
        </table>
        <input id="submit" type="submit" name="submit" value="Submit">
    </form>
</body>

</html>
javascript html forms button submit Khanpo
quelle
Welche Antwort empfehlen Sie bitte?
Sanepete

Antworten:

1798

Sie verwenden ein HTML5-Schaltflächenelement. Denken Sie daran, dass diese Schaltfläche ein Standardverhalten für das Senden aufweist, wie in der W3-Spezifikation angegeben: W3C HTML5- Schaltfläche

Sie müssen den Typ also explizit angeben:

<button type="button">Button</button>

um den Standard-Übermittlungstyp zu überschreiben. Ich möchte nur auf den Grund hinweisen, warum dies passiert =)

=)

Metafaniel
quelle
17
Ich möchte auch darauf hinweisen, dass ein HTML-Element mit einem Typattribut, von dem einer die Schaltfläche ist , keinen Standardtyp für die Übermittlung haben sollte . Es ist einfach nur idiotisch und ein großer Fehler in der Spezifikation. Ich verwende ständig Schaltflächen in Formularen, und selbst wenn es sich um einen Randfall handelt (was nicht der Fall ist), wäre es dennoch sinnvoll, den Standardtyp zum Senden zu verwenden.
Dudewad
3
🤯 Ich habe den größten Teil dieser Woche damit verbracht, dass meine Electron-App "aktualisiert" wurde, wenn ich ein Modal über eine Schaltfläche in einem Formular öffne. Es würde einmal passieren und dann verhielt sich die App wie erwartet. Ich hatte absolut keine Ahnung, was los war. Das war's! Ich habe kein Problem mit dem Standardtyp, der gesendet wird. Es scheint ein bisschen gotcha zu sein, obwohl ich fünf Jahre gebraucht habe, um etwas darüber zu lernen.
Freethebees
4
Dank Ihrer Referenz habe ich gerade erfahren, dass es einen Typ = Reset für das Formular gibt. Genial!
Duong Nguyen
602

Stellen Sie den Typ auf Ihren Tasten ein:

<button type="button" onclick="addItem(); return false;">Add Item</button>
<button type="button" onclick="removeItem(); return false;">Remove Last Item</button>

... damit sie keine Submit-Aktion auslösen, wenn im Event-Handler eine Ausnahme auftritt. Korrigieren Sie dann Ihre removeItem()Funktion so, dass keine Ausnahme ausgelöst wird:

function removeItem() {
  var rows = $('form tr');
  if ( rows.length > 2 ) {
    // change: work on filtered jQuery object
    rows.filter(":last").html('');
    $('form :hidden:last').val('');
  } else {
    alert('Cannot remove any more rows');
  }
}

Beachten Sie die Änderung: Ihr ursprünglicher Code extrahierte ein HTML-Element aus dem jQuery-Satz und versuchte dann, eine jQuery-Methode darauf aufzurufen. Dies löste eine Ausnahme aus, die zum Standardverhalten für die Schaltfläche führte.

FWIW, es gibt noch einen anderen Weg, wie Sie damit umgehen können ... Verdrahten Sie Ihre Ereignishandler mit jQuery und verwenden Sie die Methode präventDefault () für das Ereignisobjekt von jQuery , um das Standardverhalten im Voraus abzubrechen:

$(function() // execute once the DOM has loaded
{

  // wire up Add Item button click event
  $("#AddItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of add logic
  });

  // wire up Remove Last Item button click event
  $("RemoveLastItem").click(function(event)
  {
    event.preventDefault(); // cancel default behavior

    //... rest of remove last logic
  });

});

...

<button type="button" id="AddItem" name="AddItem">Add Item</button>
<button type="button" id="RemoveLastItem" name="RemoveLastItem">Remove Last Item</button>

Diese Technik hält Ihre gesamte Logik an einem Ort und erleichtert das Debuggen. Sie ermöglicht auch das Implementieren eines Fallbacks, indem Sie typedie Schaltflächen wieder auf submitdie Ereignisserverseite ändern und diese behandeln - dies wird als unauffällig bezeichnet JavaScript .

Shog9
quelle
4
type = "button" funktioniert in Firefox bei mir nicht immer. Wenn das js kompliziert genug ist und ein Fehler vorliegt, sendet Firefox das Formular trotzdem. Wahnsinn!
Matthew Lock
1
@MatthewLock: Kaum - ein Fehler im Skript fährt nur diesen Codeblock herunter und die Aktion wird wie gewohnt fortgesetzt. Versuchen Sie, die jQuery-Ereignismethoden e.preventDefault () und / oder e.stopPropgation () als erste Zeilen der Methode aufzurufen. Siehe stackoverflow.com/questions/2017755/... mehr zu lernen
brichins
8
type = button sollte das Formular jedoch niemals senden, egal was
Matthew Lock
1
return falseist so wichtig. manchmal sogar für die Schaltfläche "Senden" verwenden ( onclick）
Jamie
7
Ich finde HTML hier seltsam. Es sollte standardmäßig type = "button" sein und nicht senden. Es ist für mich immer unerwartet, dass diese Übermittlung standardmäßig angezeigt wird. Es ist die Ausnahme.
httpete
31

Vor einiger Zeit brauchte ich etwas sehr Ähnliches ... und ich habe es bekommen.

Was ich hier schreibe, ist, wie ich die Tricks mache, um ein Formular ohne Validierung von JavaScript senden zu lassen und die Validierung nur auszuführen, wenn der Benutzer eine Schaltfläche drückt (normalerweise eine Senden-Schaltfläche).

Für das Beispiel werde ich ein minimales Formular verwenden, nur mit zwei Feldern und einer Senden-Schaltfläche.

Denken Sie daran, was gewünscht wird: Von JavaScript muss es ohne Überprüfung eingereicht werden können. Wenn der Benutzer jedoch eine solche Taste drückt, muss die Validierung durchgeführt und das Formular nur gesendet werden, wenn die Validierung bestanden wurde.

Normalerweise würde alles von etwas in der Nähe beginnen (ich habe alle zusätzlichen Dinge entfernt, die nicht wichtig sind):

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="submit" value="Send" onclick="JavaScript:return Validator();" />
</form>

Sehen Sie, wie das Formular-Tag kein hat onsubmit="..."(denken Sie daran, dass es eine Bedingung war, es nicht zu haben).

Das Problem ist, dass das Formular immer gesendet wird, egal ob onclickzurückgegeben trueoder false.

Wenn ich mich type="submit"für wechsle type="button", scheint es zu funktionieren, funktioniert aber nicht. Das Formular wird nie gesendet, dies ist jedoch problemlos möglich.

Also habe ich endlich folgendes benutzt:

<form method="post" id="theFormID" name="theFormID" action="">
   <input type="text" id="Field1" name="Field1" />
   <input type="text" id="Field2" name="Field2" />
   <input type="button" value="Send" onclick="JavaScript:return Validator();" />
</form>

Und function Validatorwo, wo return True;ist, füge ich auch einen JavaScript-Submit-Satz hinzu, ähnlich wie dieser:

function Validator(){
   //  ...bla bla bla... the checks
   if(                              ){
      document.getElementById('theFormID').submit();
      return(true);
   }else{
      return(false);
   }
}

Das id=""ist nur für JavaScript getElementById, das name=""ist nur für das Erscheinen in POST-Daten.

Auf diese Weise funktioniert es wie ich brauche.

Ich stelle dies nur für Personen ein, die keine onsubmitFunktion im Formular benötigen , aber eine Validierung vornehmen, wenn eine Taste vom Benutzer gedrückt wird.

Warum brauche ich kein Onsubmit auf Formular-Tag? Einfach, bei anderen JavaScript-Teilen muss ich eine Übermittlung durchführen, aber ich möchte nicht, dass es eine Validierung gibt.

Der Grund: Wenn der Benutzer derjenige ist, der die Übermittlung durchführt, möchte und muss die Validierung durchgeführt werden, aber wenn es sich um JavaScript handelt, muss ich die Übermittlung manchmal durchführen, während solche Validierungen dies vermeiden würden.

Es mag seltsam klingen, aber nicht, wenn man zum Beispiel denkt: bei einem Login ... mit einigen Einschränkungen ... wie PHP-Sitzungen nicht verwenden zu dürfen und keine Cookies erlaubt sind!

Daher muss jeder Link in ein solches Formular konvertiert werden, damit die Anmeldedaten nicht verloren gehen. Wenn noch keine Anmeldung erfolgt ist, muss es auch funktionieren. Daher muss keine Validierung für Links durchgeführt werden. Ich möchte dem Benutzer jedoch eine Nachricht präsentieren, wenn der Benutzer nicht beide Felder, Benutzer und Pass, eingegeben hat. Wenn eines fehlt, darf das Formular nicht gesendet werden! da ist das Problem.

Siehe das Problem: Das Formular darf nicht gesendet werden, wenn ein Feld leer ist, nur wenn der Benutzer eine Schaltfläche gedrückt hat. Wenn es sich um einen JavaScript-Code handelt, muss es gesendet werden können.

Wenn ich onsubmitan dem Formular-Tag arbeite , muss ich wissen, ob es sich um den Benutzer oder ein anderes JavaScript handelt. Da keine Parameter übergeben werden können, ist dies nicht direkt möglich. Einige Benutzer fügen daher eine Variable hinzu, um festzustellen, ob eine Validierung durchgeführt werden muss oder nicht. Das erste, was bei der Validierungsfunktion der Fall ist, ist, diesen Variablenwert usw. zu überprüfen. Zu kompliziert und der Code sagt nicht aus, was wirklich gewünscht wird.

Die Lösung besteht also nicht darin, das Formular-Tag erneut einzureichen. Insead legte es dort, wo es wirklich gebraucht wird, auf den Knopf.

Auf der anderen Seite, warum Onsubmit-Code setzen, da ich konzeptionell keine Onsubmit-Validierung möchte. Ich möchte wirklich eine Tastenüberprüfung.

Der Code ist nicht nur klarer, er muss auch dort sein, wo er sein muss. Denken Sie daran: - Ich möchte nicht, dass JavaScript das Formular validiert (dies muss immer von PHP auf der Serverseite durchgeführt werden). - Ich möchte dem Benutzer eine Meldung anzeigen, dass alle Felder nicht leer sein dürfen und JavaScript (Client) benötigen Seite)

Warum müssen einige Leute (denken oder sagen Sie es mir) eine Onsumbit-Validierung durchführen? Nein, konzeptionell mache ich keine Onsumbit-Validierung auf Client-Seite. Ich mache nur etwas auf Knopfdruck. Warum also nicht einfach das implementieren lassen?

Nun, dieser Code und Stil machen den Trick perfekt. Auf jedem JavaScript, das ich zum Senden des Formulars benötige, habe ich gerade Folgendes eingegeben:

document.getElementById('theFormID').action='./GoToThisPage.php'; // Where to go
document.getElementById('theFormID').submit(); // Send POST data and go there

Und das überspringt die Validierung, wenn ich sie nicht brauche. Es sendet nur das Formular und lädt eine andere Seite usw.

Wenn der Benutzer jedoch auf die Schaltfläche " Senden" klickt (auch bekannt als " type="button"Nicht" type="submit"), erfolgt die Validierung, bevor das Formular gesendet und, falls nicht gültig, nicht gesendet wird.

Ich hoffe, dies hilft anderen, langen und komplizierten Code nicht auszuprobieren. Nur nicht verwenden, onsubmitwenn nicht benötigt, und verwenden onclick. Aber denken Sie daran, type="submit"zu JavaScript zu wechseln , type="button"und vergessen Sie bitte nicht, dies submit()per JavaScript zu tun .

z666zz666z
quelle
28

Ich stimme Shog9 zu, obwohl ich stattdessen Folgendes verwenden könnte:

<input type = "button" onClick="addItem(); return false;" value="Add Item" />

Laut w3schools hat das <button>Tag in verschiedenen Browsern ein unterschiedliches Verhalten.

Poundifdef
quelle
18

Angenommen, Ihr HTML-Formular hat id="form_id"

<form id="form_id">
<!--your HTML code-->
</form>

Fügen Sie dieses jQuery-Snippet zu Ihrem Code hinzu, um das Ergebnis anzuzeigen.

$("#form_id").submit(function(){
  return false;
});
Prateek Joshi
quelle
18

Sie können die Referenz Ihrer Schaltflächen einfach mit jQuery abrufen und deren Weitergabe wie folgt verhindern:

 $(document).ready(function () {
    $('#BUTTON_ID').click(function(e) {

            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();

            return false;
    });});
Ata Iravani
quelle
2
e.preventDefault(); e.stopPropagation();ist genug, damit die Dinge funktionieren. e.stopImmediatePropagation()Dies löst einen Fehler der undefinierten Methode in Chrome aus.
Subroto
14

$("form").submit(function () { return false; }); Das wird die Taste von der Abgabe verhindern , oder Sie können einfach auf die Schaltfläche Typen ändern „Knopf“ <input type="button"/>statt <input type="submit"/> denen nur funktionieren , wenn diese Taste nicht die einzige Schaltfläche in dieser Form ist.

Shiala
quelle
2
Dies gilt für jQuery. Eine Entsprechung in Javascript lautet: myform.onsubmit = function () {return false} ... Auch wenn Sie die Schaltfläche zum Senden entfernen, kann das Formular auch durch Drücken der Eingabetaste aus einem anderen Formularfeld gesendet werden.
Synexis
10

Dies ist ein HTML5-Fehler, wie bereits gesagt wurde. Sie können die Schaltfläche dennoch als Senden verwenden (wenn Sie sowohl Javascript- als auch Nicht-Javascript-Benutzer abdecken möchten), indem Sie sie wie folgt verwenden:

     <button type="submit" onclick="return false"> Register </button>

Auf diese Weise können Sie die Übermittlung abbrechen, aber dennoch alles tun, was Sie in jquery- oder Javascript-Funktionen tun, und die Übermittlung für Benutzer durchführen, die kein Javascript haben.

Sagits
quelle
8

Ich bin mir sicher, dass auf FF die 

removeItem

Funktion stoßen auf einen JavaScript-Fehler, der im IE nicht passiert ist

Wenn ein Javascript-Fehler auftritt, wird der Code "return false" nicht ausgeführt, sodass die Seite zurückgesetzt wird

Alin Vasile
quelle
8

Die Rückgabe false verhindert das Standardverhalten. Die Rückgabe false unterbricht jedoch das Sprudeln zusätzlicher Klickereignisse. Dies bedeutet, dass andere Klickbindungen nach dem Aufruf dieser Funktion nicht berücksichtigt werden.

 <button id="btnSubmit" type="button">PostData</button>
 <Script> $("#btnSubmit").click(function(){
   // do stuff
   return false;
}); </Script>

Oder einfach so sagen

 <button type="submit" onclick="return false"> PostData</button>
Sunil Dhappadhule
quelle
7

Fügen e.preventDefault();Sie einfach Ihre Methode hinzu, um zu verhindern, dass Ihre Seite Formulare sendet.

function myFunc(e){
       e.preventDefault();
}

Laut den MDN Web Docs

Die PreventDefault () -Methode der Ereignisschnittstelle teilt dem Benutzeragenten mit, dass die Standardaktion des Ereignisses nicht wie gewohnt berücksichtigt werden sollte, wenn es nicht explizit verarbeitet wird. Das Ereignis wird wie gewohnt fortgesetzt, es sei denn, einer seiner Listener ruft an stopPropagation ()oder stopImmediatePropagation ()beendet die Weitergabe.

Mselmi Ali
quelle
6

Stellen Sie Ihre Schaltfläche auf normale Weise ein und verwenden Sie event.preventDefault wie .. 

   <button onclick="myFunc(e)"> Remove </button>  
   ...
   ...

   In function...

   function myFunc(e){
       e.preventDefault();
   }
Vishal
quelle
4 
return false;

Sie können am Ende der Funktion oder nach dem Funktionsaufruf false zurückgeben.

Solange es das letzte ist, was passiert, wird das Formular nicht gesendet.

WonderWorker
quelle
2

Hier ist ein einfacher Ansatz:

$('.mybutton').click(function(){

    /* Perform some button action ... */
    alert("I don't like it when you press my button!");

    /* Then, the most important part ... */
    return false;

});
Axiom82
quelle
1

Der folgende Beispielcode zeigt Ihnen, wie Sie verhindern können, dass durch Klicken auf eine Schaltfläche ein Formular gesendet wird.

Sie können meinen Beispielcode ausprobieren:

 <form autocomplete="off" method="post" action="">
   <p>Title:
     <input type="text" />
   </p>
   <input type="button" onclick="addItem()" value="Add Item">
   <input type="button" onclick="removeItem()" value="Remove Last Item">
   <table>
     <th>Name</th>

     <tr>
       <td>
         <input type="text" id="input1" name="input1" />
       </td>
       <td>
         <input type="hidden" id="input2" name="input2" />
       </td>
     </tr>
   </table>
   <input id="submit" type="submit" name="submit" value="Submit">
 </form>
<script language="javascript">
function addItem() {
return false;
}

function removeItem() {
return false;
}
</script>
Der KNVB
quelle
0

Ich kann dies derzeit nicht testen, aber ich würde denken, Sie könnten die PreventDefault- Methode von jQuery verwenden.

Tyler Rash
quelle
0

Die Funktion removeItem enthält tatsächlich einen Fehler, wodurch die Formularschaltfläche ihr Standardverhalten ausführt (Senden des Formulars). Die Javascript-Fehlerkonsole gibt in diesem Fall normalerweise einen Zeiger.

Überprüfen Sie die Funktion removeItem im Javascript-Teil:

Die Linie:

rows[rows.length-1].html('');

funktioniert nicht Versuchen Sie stattdessen Folgendes:

rows.eq(rows.length-1).html('');
ylebre
quelle