1216 Stimmen

So verhindern Sie das Absenden von Formularen über Schaltflächen

Auf der folgenden Seite wird das Formular mit Firefox mit der Schaltfläche "Entfernen" abgeschickt, mit der Schaltfläche "Hinzufügen" jedoch nicht.

Wie kann ich die remove Schaltfläche vom Absenden des Formulars ab?

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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<html>
<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>

0 Stimmen

Welche Antwort empfehlen Sie bitte?

1voto

Tyler Rash Punkte 1155

Ich bin nicht in der Lage, dies im Moment zu testen, aber ich würde denken, Sie könnten jQuery's verwenden preventDefault Methode.

1voto

The KNVB Punkte 2596

Der folgende Beispielcode zeigt Ihnen, wie Sie verhindern können, dass ein Klick auf eine Schaltfläche das Formular abschickt.

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>

0voto

ylebre Punkte 3090

Die Funktion removeItem enthält einen Fehler, der dazu führt, dass die Formularschaltfläche ihr Standardverhalten ausführt (Absenden des Formulars). Die Javascript-Fehlerkonsole gibt in diesem Fall in der Regel einen Hinweis aus.

Sehen Sie sich die Funktion removeItem im Javascript-Teil an:

Die Linie:

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

funktioniert nicht. Versuchen Sie stattdessen dies:

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

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X