jQueryでボタンを押したら、フォームのなかに入っているテキストをリセットしたいのですが、これまで、$()[0].reset();のように書いていましたが、jQuery3.2.1を使っているのも原因なのでしょうか? TEST $(function(){ $('#post').click(function(){ alert('test'); $('#title')[0].reset(); $('#content')[0].reset(); }); }); タイトル: 本文: 投稿

マジレス希望

jQuery3 reset()が効かない。

解決済

質問者：PlanetSD
質問日時：2017/06/27 11:36
回答数：3件

jQueryでボタンを押したら、フォームのなかに入っているテキストをリセットしたいのですが、これまで、$()[0].reset();のように書いていましたが、jQuery3.2.1を使っているのも原因なのでしょうか?

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>

<script type="text/javascript">
$(function(){
$('#post').click(function(){
alert('test');
$('#title')[0].reset();
$('#content')[0].reset();
});
});
</script>

<div>
タイトル: <input id="title"><br>
本文: <textarea id="content" rows="3"></textarea><br>
<button id="post">投稿</button>
</div>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： yambejp
回答日時：2017/06/27 14:09

たとえば、ロード時にdata-として取っておいて

リセットボタンをおすとその値に上書きするとか

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2. …
<script>
$(function(){
$('input,textarea').each(function(){$(this).data('default',$(this).val())});
$('[type=button][value=reset]').on('click',function(){
$('#title,#content').val(function(){return $(this).data('default');});
});
});
</script>

<div>
タイトル: <input id="title" value="hoge"><br>
本文: <textarea id="content" rows="3"></textarea><br>
<button type="button" id="post">投稿</button>
<input type="button" value="reset">
</div>

- 0
- 件

通報する

この回答へのお礼

ありがとうござまいす。.data()で初期のデータを保持して、リセットボタンで、戻しているのですね。書き方がとても参考になります。$('#title,#content')のように、2つでも指定できるのですね。知りませんでした。

通報する

お礼日時：2017/06/27 16:58

参考程度に

No.2

回答者： fujillin
回答日時：2017/06/27 12:44

こんにちは

reset()はリセットボタンとほぼ同じ働きをするメソッドで、formエレメントに対してのメソッドのはずです。（個々の要素に対してのメソッドではない）
https://developer.mozilla.org/ja/docs/Web/API/HT …

＞jQuery3.2.1を使っているのも原因なのでしょうか?
インデックスで取得した時点で、通常のDOM要素（jQueryオブジェクトではなく）を得ていますのでjQueryは関係なくなっているはずです。

reset()で処理したいのであれば、form要素を設定するか、あるいは個々の要素をクリアしたいだけなら直接クリアすればよろしいのでは。
例えば、
　$('#title').val("");
　$('#content').val("");

＞これまで、$()[0].reset();のように書いていましたが～～
ブラウザ依存で動作するものがあるのかも知れませんが、普通は動作しないのではないでしょうか？