1. ホーム
  2. jquery

[解決済み] 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.
});