[解決済み] jquery get all form elements: input, textarea & select
2022-08-05 11:48:08
質問
jqueryで、すべてのフォーム要素を選択し、フォーム要素のみを選択する簡単な方法(別々にリストアップすることなく)はありますか?
フォームに他のHTMLが含まれているため、children()などは使えません。
例
$("form").each(function(){
let $inputs = $("input, textarea, select", this);
});
どのように解決するのですか?
編集してください。
コメントで指摘されているように(
マリオ・アワド
&
ブロック・ヘンズレー
を使用します。
.find
で子プロセスを取得します。
$("form").each(function(){
$(this).find(':input') //<-- Should return all input elements in that specific form.
});
フォームも要素コレクションを持ちますが、フォームタグがテーブルの中にあって閉じられていない場合など、これが子要素と異なる場合があります。
var summary = [];
$('form').each(function () {
summary.push('Form ' + this.id + ' has ' + $(this).find(':input').length + ' child(ren).');
summary.push('Form ' + this.id + ' has ' + this.elements.length + ' form element(s).');
});
$('#results').html(summary.join('<br />'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="A" style="display: none;">
<input type="text" />
<button>Submit</button>
</form>
<form id="B" style="display: none;">
<select><option>A</option></select>
<button>Submit</button>
</form>
<table bgcolor="white" cellpadding="12" border="1" style="display: none;">
<tr><td colspan="2"><center><h1><i><b>Login
Area</b></i></h1></center></td></tr>
<tr><td><h1><i><b>UserID:</b></i></h1></td><td><form id="login" name="login" method="post"><input
name="id" type="text"></td></tr>
<tr><td><h1><i><b>Password:</b></i></h1></td><td><input name="pass"
type="password"></td></tr>
<tr><td><center><input type="button" value="Login"
onClick="pasuser(this.form)"></center></td><td><center><br /><input
type="Reset"></form></td></tr></table></center>
<div id="results"></div>
もしかして :入力 セレクタはあなたが望むものです
$("form").each(function(){ ) $(':input', this)//<-- 特定のフォームにあるすべての入力要素を返すようにします。 });
docsで指摘されているように
要素を選択するために :input を使用するときに最高のパフォーマンスを得るには、まず純粋な CSS セレクタを使用して要素を選択し、次に .filter(":input") を使用してください。
以下のように使用することができます。
$("form").each(function(){
$(this).filter(':input') //<-- Should return all input elements in that specific form.
});
関連
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] jQueryで入力を無効化/有効化する?
-
[解決済み] jQueryを使ってドロップダウンリスト(セレクトボックス)から選択されたテキストを取得する
-
[解決済み] jQueryで複数のクラスを持つ要素を選択するにはどうすればよいですか?
-
[解決済み] jQueryで現在のURLを取得する?
-
[解決済み] jQueryでフォームデータをJavaScriptオブジェクトに変換する
-
[解決済み] jQueryで名前を指定して要素を選択するには?
-
[解決済み] jQuery select onChangeの値を取得する。
-
[解決済み] 入力にフォーカスがあるかどうかをテストするためにjQueryを使用する
-
[解決済み] JQuery .each()の裏技
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
echarts-all.js:1 Uncaught TypeError: nullのプロパティ'getAttribute'を読み取ることができません。
-
[解決済み] jQuery データ属性の値に基づいて要素を検索する方法は?
-
[解決済み] jQueryでtextareaの値を設定する
-
[解決済み] GoogleのCDNからjQuery UI CSSをダウンロードする
-
[解決済み] jQueryの検証:デフォルトのエラーメッセージを変更する
-
[解決済み] jQueryの.ajax()メソッドが私のセッションクッキーを送信しないのはなぜですか?
-
[解決済み] jQuery .onとhoverの使い分けは可能ですか?
-
[解決済み】iPad版SafariでjQueryを使ってタッチイベントを認識させる方法は?可能でしょうか?
-
[解決済み] jQueryを使用して文字列から最後の文字を削除する方法は?
-
[解決済み] jQueryの検証エラーメッセージを消すには?