web-dev-qa-db-ja.com

フォームをクリアするには？

たとえば、次のようなフォームがあります。

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

Resetを押すと、すべてのフィールドが空になります。しかし、URLパラメーターを使用していくつかのフィールドに値を入力し、Resetを押すと、フォームのリロード後に入力したフィールドのみが空になります。

フォームのロード時にいくつかのフィールドがすでに入力されているかどうかにかかわらず、すべてのフィールドを空にするにはどうすればよいですか。

htmlformsreset
18
Student

他の人が指摘したように、フォームをblankする必要性を再考すべきだと思います。ただし、その機能が本当に必要な場合は、これを行う1つの方法です。

プレーン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;
}

hidden入力をクリアするケースをコメントアウトしたことに注意してください。ほとんどの場合、これは必要ありません。

これが機能するためには、ボタンのonclickハンドラー（または他の方法）から関数を呼び出す必要があります。このような：

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

すべてここでテストできます jsFiddle 。

プロジェクトでjQueryを使用する場合、より少ないコードでこれを実行できます（HTMLを変更する必要はありません）。

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;
    });

});

また、非表示の入力、チェックボックス、ラジオボタンのvaluesをクリアしないことに注意してください。

これで遊んでください こちら 。

21
Marko Dumic

Jqueryでは、単に使用できます。

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

これらはすべてJavaScriptでクリアする必要があります（またはサーバー側でクリアします）。

resetボタンは、フォーム要素を初期値にリセットするだけです-これが特定の値だった場合、それがリセットされます。

6
Oded

JQueryを使用している場合、コードははるかに簡単です。

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

非表示フィールドもクリアする場合は、.notセレクターから：hiddenを削除することもできます。

1
Francis Lewis

フォームをクリアする最も簡単な方法は、HTMLタグを使用することです

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

例：

<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>
1
ociugi

JQueryを使用していくつかの提案をまとめ、質問に対するより完全なソリューションを提供しました。

_<!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>
_

Headセクションにjquery libを含め、Resetボタンにonclickハンドラーを追加したことに注意してください。最後に、他のいくつかの回答からのフィードバックに基づいて、JavaScriptコードを追加しました。

また、1つのテキストフィールドにプリセット値を追加しました。 val('')関数はそのようなフィールドをクリアしません。そのため、最後のスクリプト行にattr('value','')をそのようなデフォルト値をクリアに追加しました。

0
Thomas Tempelmann

あなたはJSでこれに似た何かをし、ボタン内のonclickからそれを呼び出すことができます：

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

そして、HTMLファイルで：

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

このソリューションをFirebaseで使用する場合、呼び出しの直後にreturn falseを追加しない限り、実際にはデータベースに何も送信されません。

0
mur7ay