jquery - jqueryはすべてのフォーム要素を取得します:input、textarea、およびselect

Question

jqueryですべてのフォーム要素とフォーム要素のみを選択する簡単な方法はありますか(すべてを個別にリストすることなく)。

フォームに他のHTMLが含まれているため、children()などを使用できません。

例えば：

$("form").each(function(){
    let $inputs = $("input, textarea, select", this);
});

Answer 1

編集：コメント（ Mario Awad＆Brock Hensley）で指摘されている.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）// <-すべての入力要素をその特定の形式で返す必要があります。}）;

ドキュメントで指摘されているように

：inputを使用して要素を選択するときに最高のパフォーマンスを実現するには、最初に純粋なCSSセレクターを使用して要素を選択し、次に.filter（ "：input"）を使用します。

以下のように使用できます、

$("form").each(function(){
    $(this).filter(':input') //<-- Should return all input elements in that specific form.
});

Answer 2

以下のコードは、フォーム ID を持つ特定のフォームから要素の詳細を取得するのに役立ちます。

$('#formId input, #formId select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

以下のコードは、読み込みページに配置されているすべてのフォームから要素の詳細を取得するのに役立ちます。

$('form input, form select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

以下のコードは、要素がタグ内に配置されていない場合でも、読み込みページに配置されている要素の詳細を取得するのに役立ちます。

$('input, select').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

注:以下のように、オブジェクト リストに必要な要素タグ名を追加します。

Example: to get name of attribute "textarea",

$('input, select, textarea').each(
    function(index){  
        var input = $(this);
        alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
    }
);

Answer 3

追加のタイプがある場合は、セレクターを編集します。

var formElements = new Array();
$("form :input").each(function(){
    formElements.push($(this));
});

すべてのフォーム要素が配列 formElements に含まれるようになりました。

Answer 4

別の方法を追加するだけです：

$('form[name=' + formName + ']').find(':input')

Answer 5

この機能を試す

function fieldsValidations(element) {
    var isFilled = true;
    var fields = $("#"+element)
        .find("select, textarea, input").serializeArray();

    $.each(fields, function(i, field) {
        if (!field.value){
            isFilled = false;
            return false;
        }
    });
    return isFilled;
}

そしてそれを次のように使用します

$("#submit").click(function () {

    if(fieldsValidations('initiate')){
        $("#submit").html("<i class=\"fas fa-circle-notch fa-spin\"></i>");
    }
});

楽しみ ：）

Answer 6

この方法を使用して、特定のフォームからすべての入力フィールドを取得しました。

$("#myForm").find("input").each(function() {
   // your stuff goes here
});

または、ここの場合：

$("#myForm").find("select, textarea, input").each(function() {
   // your stuff goes here
});