wake-up-neo.net

Wie lösche ich ein Formular?

Zum Beispiel habe ich ein Formular wie dieses:

<form method='post' action='someaction.php' name='myform'>

<input type='text' name='text1'>
<input type='text' name='text2'>

<input type='checkbox' name="check1">Check Me

<textarea rows="2" cols="20" name='textarea1'></textarea>

<select name='select1'>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<input type='reset' value='Reset' name='reset'>
<input type='submit' value='Submit' name='submit'>

</form>

Wenn ich Reset drücke, werden alle Felder geleert. Wenn ich jedoch einige Felder mit URL-Parametern fülle und dann Reset drücke, werden nur Felder geleert, die ich nach dem Neuladen des Formulars eingebe. 

Wie kann ich alle Felder leeren, wenn zum Zeitpunkt des Formularladens bereits einige Felder ausgefüllt sind.

htmlformsreset
15
Student

Wie andere darauf hingewiesen haben, sollten Sie die Notwendigkeit, blank der Form zu überprüfen, noch einmal überdenken. Wenn Sie diese Funktionalität wirklich benötigen, können Sie dies auf folgende Weise tun:

Normales Javascript:

function resetForm(form) {
    // clearing inputs
    var inputs = form.getElementsByTagName('input');
    for (var i = 0; i<inputs.length; i++) {
        switch (inputs[i].type) {
            // case 'hidden':
            case 'text':
                inputs[i].value = '';
                break;
            case 'radio':
            case 'checkbox':
                inputs[i].checked = false;   
        }
    }

    // clearing selects
    var selects = form.getElementsByTagName('select');
    for (var i = 0; i<selects.length; i++)
        selects[i].selectedIndex = 0;

    // clearing textarea
    var text= form.getElementsByTagName('textarea');
    for (var i = 0; i<text.length; i++)
        text[i].innerHTML= '';

    return false;
}

Beachten Sie, dass ich den Fall auskommentiert habe, in dem ich die hidden-Eingänge lösche. Meist ist dies nicht notwendig.

Damit dies funktioniert, müssen Sie die Funktion über den onclick-Handler einer Schaltfläche (oder auf andere Weise) aufrufen, z. so was:

<input type='reset' value='Reset' name='reset' onclick="return resetForm(this.form);">

Sie können alles hier auf jsFiddle testen.

Wenn Sie jQuery in Ihrem Projekt verwenden, können Sie dies mit viel weniger Code tun (und Sie müssen den HTML-Code nicht ändern):

jQuery(function($) { // onDomReady

    // reset handler that clears the form
    $('form[name="myform"] input:reset').click(function () {
        $('form[name="myform"]')
            .find(':radio, :checkbox').removeAttr('checked').end()
            .find('textarea, :text, select').val('')

        return false;
    });

});

Beachten Sie auch, dass ich die values ​​ von ausgeblendeten Eingaben, Kontrollkästchen und Optionsfeldern nicht lösche.

Spielen Sie mit diesem hier .

20
Marko Dumic

In jquery können Sie einfach verwenden,

$("#yourFormId").trigger('reset');
8
tutesFree

Sie müssen sie alle mit Javascript löschen (oder auf der Serverseite löschen).

Die reset-Schaltfläche setzt nur Formularelemente auf ihren ursprünglichen Wert zurück. Wenn dies ein bestimmter Wert war, wird er darauf zurückgesetzt.

6
Oded

Wenn Sie jQuery verwenden, ist der Code viel einfacher:

$('#my-form').not(':button, :submit, :reset, :hidden').val('').removeAttr('checked').removeAttr('selected');

Sie können auch die Option: hidden aus der .not-Auswahl entfernen, wenn Sie auch ausgeblendete Felder löschen möchten.

1
Francis Lewis

Ich habe einige der Vorschläge mit jQuery zusammengefasst, um eine vollständigere Lösung für die Frage zu erhalten:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Demo Forms</title>
        <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    </head>
    <body>

        <form method='post' action='someaction.php' name='myform'>

            <input type='text' name='text1'>
            <input type='text' name='text2' value='preset value'>

            <input type='checkbox' name="check1">Check Me

            <textarea rows="2" cols="20" name='textarea1'></textarea>

            <select name='select1'>
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="mercedes">Mercedes</option>
              <option value="audi">Audi</option>
            </select>

            <input type='button' value='Reset' name='reset' onclick="return clearForm(this.form);">
            <input type='submit' value='Submit' name='submit'>

            <script>
                function clearForm(form) {
                    var $f = $(form);
                    var $f = $f.find(':input').not(':button, :submit, :reset, :hidden');
                    $f.val('').attr('value','').removeAttr('checked').removeAttr('selected');
                }
            </script>
        </form>
    </body>
</html>

Beachten Sie, dass ich die Jquery-Bibliothek im Kopfabschnitt hinzugefügt und der Reset-Schaltfläche einen onclick-Handler hinzugefügt habe. Zum Schluss habe ich den Javascript-Code hinzugefügt, der auf den Rückmeldungen einiger anderer Antworten basiert.

Ich habe auch ein voreingestellter Wert zu einem Textfeld hinzugefügt. Die Funktion val('') würde ein solches Feld nicht löschen. Aus diesem Grund habe ich auch ___ (Funktion attr('value','')) zu Standardwerte löschen hinzugefügt.

0
Thomas Tempelmann

Die einfachste Möglichkeit zum Löschen eines Formulars ist die Verwendung des HTML-Tags

<input type="reset" value="Reset">

Beispiel:

<form>
  <table>
    <tr>
      <td>Name</td>
      <td><input type="text" name="name"></td>
    </tr>
    <tr>
      <td>Reset</td>
      <td><input type="reset" value="Reset"></td>
    </tr>
  </table>
</form>
0
ociugi

Sie können etwas Ähnliches in JS tun und es von onclick innerhalb Ihres Buttons aus aufrufen: 

function submit() {
  $('#fieldIdOne').val('');
  $('#fieldIdTwo').val('');
}

Und dann in Ihrer HTML-Datei: 

<button id="submit" onclick="submit(); return false">SIGN UP</button>

Wenn Sie diese Lösung mit Firebase verwenden, sendet sie nichts an die Datenbank, es sei denn, Sie fügen direkt nach dem Aufruf return false hinzu.

0
mur7ay