jquery入力フィールドを空にする方法

199

私はモバイルアプリで、ユーザーが番号を送信するために入力フィールドを使用しています。

戻ってページに戻ると、その入力フィールドには、入力フィールドに表示されている最新の数値入力が表示されています。

ページが読み込まれるたびにフィールドをクリアする方法はありますか？

$('#shares').keyup(function(){
    payment = 0;
    calcTotal();
    gtotal = ($('#shares').val() * 1) + payment;
    gtotal = gtotal.toFixed(2);
    $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
});

— コスボウ
ソース

418

を使用して入力フィールドをクリアできます $('#shares').val('');

— ショーンサンタクルス
ソース

2

これは機能し、数値入力がある場合、仕様に準拠しています<input type="number" min="0' max="10" value="5"></input>か？別の言い方をすると思いますが、数値入力を空白に設定できますか？

— Kevin Wheeler

3

いかが.val([])ですか？

— Fr0zenFyr

3

関連するメモで.val([])は、選択リストで選択したオプションの選択を解除することもできます...ではそれほどではありません.val('')。それについての最もよい事はそれがクロスブラウザサポートであるということです。PS：これは、他の効率的なクロスブラウザソリューションの代替手段ですが、$("select option").prop("selected", false);すべての入力で機能します。Jonが作成したテストに感謝します。

— Fr0zenFyr

29

$(document).ready(function(){
  $('#shares').val('');
});

— オサヒョン
ソース

10

フォームを送信するときに、フォームでリセットメソッドを使用します。reset（）メソッドは、フォーム内のすべての要素の値をリセットします。

$('#form-id')[0].reset();

OR 

document.getElementById("form-id").reset();

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

$("#submit-button").on("click", function(){
       //code here
       $('#form-id')[0].reset();
});

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form id="form-id">
  First name:<br>
  <input type="text" name="firstname">
  <br>
  Last name:<br>
  <input type="text" name="lastname">
  <br><br>
  <input id="submit-button" type="submit" value="Submit">
</form> 
</body>
</html>

スニペットを展開

— ラディカ
ソース

誰かを助けることができるが、この文脈ではあなたの答えは役に立たない。

— Marco Concas

8

設定val('')により、入力フィールドが空になります。だからあなたはこれを使うでしょう：

ページが読み込まれたときに入力フィールドをクリアします。

$(function(){
    $('#shares').val('');
});

— フランシス・ルイス
ソース

4

jQueryを使用しているので、trigger- resetの使用についてはどうでしょうか。

$(document).ready(function(){
  $('#shares').trigger(':reset');
});

— サブレフォステ
ソース

3

テキスト、数値、検索、テキストエリア入力をリセットするには：

$('#shares').val('');

選択をリセットするには：

$('#select-box').prop('selectedIndex',0);

無線入力をリセットするには：

$('#radio-input').attr('checked',false);

ファイル入力をリセットするには：

$("#file-input").val(null);

— ニワトリ
ソース

0

「戻る」ボタンを押した場合、通常は固執する傾向があります。フォームを送信したときに要素をクリアしてから、次のページに移動する前に、必要な要素を操作した後に実行できます。

    $('#shares').keyup(function(){
                payment = 0;
                calcTotal();
                gtotal = ($('#shares').val() * 1) + payment;
                gtotal = gtotal.toFixed(2);
                $('#shares').val('');
                $("p.total").html("Total Payment: <strong>" + gtotal + "</strong>");
            });

— クリス
ソース