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>
No.2
- 回答日時:
こんにちは
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();のように書いていましたが~~
ブラウザ依存で動作するものがあるのかも知れませんが、普通は動作しないのではないでしょうか?
ありがとうございます。理解できました。
過去に、reset()でリセットした記憶と、jQueryでできることの処理とが混同していました。
No.3ベストアンサー
- 回答日時:
たとえば、ロード時に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>
ありがとうござまいす。.data()で初期のデータを保持して、リセットボタンで、戻しているのですね。書き方がとても参考になります。$('#title,#content')のように、2つでも指定できるのですね。知りませんでした。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jquery × php × mysql 非同期で...
-
jQueryのblockUIをformのボタン...
-
eval、$.eachで順番が入れ替わ...
-
ajax&php post 一部更新
-
Selenium4でボタンをクリックで...
-
WebbrowserよりHTMLのValue値を...
-
スライドを最後の画像で止めたい
-
メールを送信するボタンでOutlo...
-
パソコンで動くjavascriptがス...
-
★大至急!JavaScriptのif文教え...
-
同一ページ移動時ハンバーガー...
-
Jquery で on/offボタンの実装...
-
FullCalendar の複数月表示につ...
-
リンク元のURLのパラメータでペ...
-
JavaScriptでtabindexの変更っ...
-
VBAでIEのHTMLタグの要素を操作...
-
リンク付きの画像をクリックす...
-
一定時間ごとに表示内容を切り...
-
要素内を常に一番下を表示させたい
-
カンマ区切りのデータを配列に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavascriptからPHPへのAjax通信...
-
jQueryを使いformでsubmitした...
-
AjaxでJSONを受信すると、文字...
-
jQuery を外部ファイルから呼び...
-
jQueryのblockUIをformのボタン...
-
Ajaxでフォームデータを連続登...
-
jquery × php × mysql 非同期で...
-
jquery,ajaxによるphp通信でnull
-
Ajax サーバーに負荷かかります...
-
jQuery3 reset()が効かない。
-
ajaxでPHPにPOST送信して結果デ...
-
Ajaxを使った検索サイト作成
-
jQueryで外部テキストファイル...
-
Ajax・jQueryでGETとPOSTする方法
-
jqueryのloadを使って検索結果...
-
ajaxからphpにpsotしたときの日...
-
入力した文字をDBと照合させて...
-
ajax + PHPによるエラーの返し...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
おすすめ情報