it-swarm.com.de

Verhindern, dass Schaltflächen Formulare senden

Auf der folgenden Seite sendet Firefox das Formular über die Schaltfläche "Entfernen", die Schaltfläche "Hinzufügen" jedoch nicht. Wie kann ich verhindern, dass der Entfernen-Button das Formular absendet?

<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>
815
Khanpo

Sie verwenden ein HTML5-Schaltflächenelement. Denken Sie daran, dass der Grund dafür ist, dass diese Schaltfläche standardmäßig das Senden-Verhalten aufweist, wie in der W3-Spezifikation angegeben: W3C HTML5-Schaltfläche

Daher müssen Sie den Typ explizit angeben:

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

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

=)

1590
Metafaniel

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>

... die verhindern, dass sie eine Übermittlungsaktion auslösen, wenn im Ereignishandler eine Ausnahme auftritt. Korrigieren Sie dann Ihre removeItem() -Funktion, damit sie keine Ausnahme auslöst:

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 hat ein HTML-Element aus der jQuery-Gruppe extrahiert und dann versucht, eine jQuery-Methode für dieses Element aufzurufen. Dies löste eine Ausnahme aus, die zum Standardverhalten für die Schaltfläche führte.

FWIW, es gibt eine andere Möglichkeit, dies zu tun ... Schließen Sie Ihre Event-Handler mit jQuery an und verwenden Sie die preventDefault () -Methode für das event -Objekt von jQuery, um die Standardeinstellung aufzuheben Verhalten im Vorfeld:

$(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. Außerdem können Sie einen Fallback implementieren, indem Sie das type auf den Schaltflächen zurück auf submit setzen und das ereignisserverseitig - dies wird als nauffälliges JavaScript bezeichnet.

581
Shog9

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

Ich führe hier also die Tricks aus, um ein Formular zu erstellen, das von JavaScript ohne Validierung gesendet werden kann, und die Validierung nur dann auszuführen, wenn der Benutzer eine Schaltfläche drückt (normalerweise eine Senden-Schaltfläche).

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

Denken Sie daran, was gewünscht wird: Aus JavaScript muss es ohne Prüfung eingereicht werden können. Wenn der Benutzer jedoch einen solchen Knopf 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 nicht wichtigen Dinge entfernt):

<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 keinen onsubmit="..." hat (denken Sie daran, dass es eine Bedingung war, ihn nicht zu haben).

Das Problem ist, dass das Formular immer gesendet wird, egal ob onclicktrue oder false zurückgibt.

Wenn ich type="submit" für type="button" ändere, 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 auf function Validator, wo return True; ist, füge ich auch einen JavaScript-Submit-Satz hinzu, der ungefähr so ​​aussieht:

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

Der id="" ist nur für JavaScript getElementById, der name="" ist nur dafür vorgesehen, dass er in POST Daten erscheint.

Auf diese Weise funktioniert es, wie ich es brauche.

Ich setze dies nur für Leute, die keine onsubmit -Funktion im Formular benötigen, aber eine Validierung vornehmen, wenn ein Knopf vom Benutzer gedrückt wird.

Warum brauche ich kein Onsubmit-On-Form-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 Überprüfung durchgeführt werden. Wenn es sich jedoch um JavaScript handelt, muss ich die Übermittlung manchmal durchführen, während solche Überprüfungen dies vermeiden würden.

Es mag seltsam klingen, aber nicht, wenn man zum Beispiel darüber nachdenkt: bei einem Login ... mit einigen Einschränkungen ... nicht zulassen, dass PHP Sitzungen verwendet werden, und weder Cookies sind erlaubt!

Jeder Link muss also in ein solches Formular umgewandelt werden, damit die Login-Daten nicht verloren gehen. Wenn noch keine Anmeldung erfolgt ist, muss dies ebenfalls funktionieren. Daher muss für Links keine Validierung durchgeführt werden. Ich möchte dem Benutzer jedoch eine Nachricht präsentieren, wenn der Benutzer nicht beide Felder (Benutzer und Pass) eingegeben hat. Fehlt also eines, darf das Formular nicht versendet werden! da ist das Problem.

Siehe Problem: Das Formular darf nur dann nicht gesendet werden, wenn ein Feld leer ist, 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 am Formular-Tag onsubmit 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, die angibt, ob eine Validierung durchgeführt werden muss oder nicht. Das erste, was bei der Validierungsfunktion zu beachten ist, ist, den Wert der Variablen usw. zu überprüfen. Zu kompliziert und der Code sagt nicht, was wirklich gewünscht wird.

Die Lösung besteht also nicht darin, onsubmit auf dem Formular-Tag zu haben. Insead setzen Sie es, wo es wirklich benötigt wird, auf den Knopf.

Für die andere Seite, warum Onsubmit-Code, da ich konzeptionell keine Onsubmit-Validierung möchte. Ich möchte wirklich die Bestätigung von Schaltflächen.

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 überprüft (dies muss immer von PHP auf der Serverseite durchgeführt werden). - Ich möchte dem Benutzer eine Nachricht anzeigen, die besagt, dass alle Felder nicht leer sein dürfen , das JavaScript benötigt (clientseitig)

Warum müssen manche Leute (denken oder sagen Sie mir) dies bei einer Onsumbit-Validierung tun? Nein, konzeptionell mache ich keine Onsumbit-Validierung auf Client-Seite. Ich mache gerade etwas auf Knopfdruck, also warum nicht einfach das umsetzen lassen?

Nun, dieser Code und Stil machen den Trick perfekt. In jedem JavaScript, das ich zum Senden des Formulars benötige, habe ich Folgendes eingefügt:

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 es nicht brauche. Es wird nur das Formular gesendet und eine andere Seite usw. geladen.

Wenn der Benutzer jedoch auf die Schaltfläche zum Senden klickt (auch bekannt als type="button" not type="submit"), wird die Überprüfung durchgeführt, bevor das Formular gesendet und, falls nicht gültig, nicht gesendet wird.

Ich hoffe, das hilft anderen, keinen langen und komplizierten Code auszuprobieren. Verwenden Sie nur nicht onsubmit, wenn dies nicht benötigt wird, und verwenden Sie onclick. Denken Sie jedoch daran, type="submit" in type="button" zu ändern, und vergessen Sie nicht, die Funktion submit() mit JavaScript auszuführen.

29
z666zz666z

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

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

Laut w3schools verhält sich das <button> -Tag in verschiedenen Browsern unterschiedlich.

26
poundifdef

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 zu sehen.

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

Sie können einfach die Referenz Ihrer Schaltflächen 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;
    });});
15
Ata Iravani

$("form").submit(function () { return false; }); verhindert das Senden der Schaltfläche oder Sie können den Schaltflächentyp einfach auf "button" <input type="button"/> anstelle von <input type="submit"/> ändern. Dies funktioniert nur, wenn diese Schaltfläche nicht die einzige Schaltfläche in ist diese Form.

14
Shiala

Dies ist ein HTML5-Fehler, wie bereits gesagt wurde. Sie können den Button dennoch als Submit-Button verwenden (wenn Sie sowohl Javascript- als auch Nicht-Javascript-Benutzer behandeln möchten), und zwar wie folgt:

     <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.

10
sagits

Ich bin mir sicher, dass auf FF die

removeItem 

funktion stößt auf einen JavaScript-Fehler, dieser trat im IE nicht auf

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

7
Alin Vasile

Stellen Sie Ihren Button wie gewohnt ein und verwenden Sie event.preventDefault wie ..

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

   In function...

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

Die Rückgabe false verhindert das Standardverhalten. aber der return false unterbricht das Sprudeln zusätzlicher Klickereignisse. Das heißt, wenn es nach dem Aufruf dieser Funktion andere Klickbindungen gibt, werden diese von den anderen nicht berücksichtigt.

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

Oder einfach so

 <button type="submit" onclick="return false"> PostData</button>
3
return false;

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

Solange dies nicht der letzte Schritt ist, wird das Formular nicht gesendet.

3

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;

});
2
axiom82

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

Sie können meinen Beispielcode versuchen:

 <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>
1
The KNVB

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

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

Nach dem MDN Web Docs

Die preventDefault () -Methode der Ereignisschnittstelle teilt dem Benutzeragenten mit, dass seine Standardaktion nicht wie gewohnt berücksichtigt werden sollte, wenn das Ereignis nicht explizit verarbeitet wird. Das Ereignis wird wie gewohnt weitergegeben, es sei denn, einer seiner Listener ruft stopPropagation () oder stopImmediatePropagation () auf, wodurch die Weitergabe beendet wird.

1
Mselmi Ali

Die Funktion removeItem enthält tatsächlich einen Fehler, wodurch die Formularschaltfläche das Standardverhalten ausführt (das Formular wird gesendet). Die JavaScript-Fehlerkonsole gibt in diesem Fall normalerweise einen Hinweis.

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

Die Linie:

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

funktioniert nicht Versuchen Sie dies stattdessen:

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

Ich kann dies momentan nicht testen, aber ich denke, Sie könnten die Methode preventDefault von jQuery verwenden.

0
Tyler Rash