jqueryはすべてのフォーム要素を取得します：input、textarea、select

108

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

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

例えば：

$("form").each(function(){
    $(this, "input, textarea, select");
});
jquery  jquery-filter 
— ジョン・マグノリア
ソース

回答:

179

編集：コメントで指摘されているように（マリオアワド＆ブロックヘンズリー）、.find子供を取得するために使用します

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

フォームには要素コレクションもあります。これは、フォームタグがテーブル内にあり、閉じられていない場合など、子と異なる場合があります。

コードスニペットを表示

かもしれ：入力セレクタは何をしたいです

$（ "form"）。each（function（）{$（ '：input'、this）// <-その特定のフォームのすべての入力要素を返す必要があります。}）;

ドキュメントで指摘されたように

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

以下のように使えます

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

— セルバクマルアルムガム
ソース
3
読んだ後に感謝します：api.jquery.com/input-selectorパフォーマンスが問題であるので、それらをリストすることもできます。ただし、その可能性を知っておくとよい
— ジョンマグノリア
8
それは私だけですか、それともうまくいきませんかselect？編集：気にしない、私が使用する場合はselectで動作しますfind(':input')
— Brock Hensley
1
ここでは「filter」の代わりに「find」を使用する必要があります。「filter」は単一の要素（この場合は「this」要素）では機能しないためです。「フィルター」を使用すると、「選択」要素だけでなく、フォーム要素も選択できなくなります。これを指摘してくれた@Brock Hensleyに感謝します。
— Mario Awad 2014
大きなフォームはどうですか？4000以上の要素を含む巨大なフォームがあり、このセレクターは非常に低速です。仕様には、：inputはCSS3によってブラウザで最適化されていないため、私にとっては機能しないと記述されています：/。他のアイデアはありますか？
— Vasil Popov 2015年
@VasilPopov上記はあなたにとって遅すぎるかもしれません。少数の要素をグループ化して選択する必要があるいずれかの方法で、いくつかの解決策を試すことができます。
— Selvakumar Arumugam
52

以下のコードは、フォーム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());
    }
);
— スリニバサン.S
ソース
選択されたものや空白の値を与えるのではなく、select要素のすべての値とオプションをとる理由。？
— user2906838
11

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

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

これで、すべてのフォーム要素が配列formElementsにあります。

— サーカスデイ
ソース
7

レコードの場合：次のスニペットは、入力、テキストエリア、選択、ボタン、タグにカーソルを合わせると、一時的なタイトルを通じてタグの詳細を取得するのに役立ちます。

ここに画像の説明を入力してください

$( 'body' ).on( 'mouseover', 'input, textarea, select, button, a', function() {
    var $tag = $( this );
    var $form = $tag.closest( 'form' );
    var title = this.title;
    var id = this.id;
    var name = this.name;
    var value = this.value;
    var type = this.type;
    var cls = this.className;
    var tagName = this.tagName;
    var options = [];
    var hidden = [];
    var formDetails = '';

    if ( $form.length ) {
        $form.find( ':input[type="hidden"]' ).each( function( index, el ) {
            hidden.push( "\t" + el.name + ' = ' + el.value );
        } );

        var formName = $form.prop( 'name' );
        var formTitle = $form.prop( 'title' );
        var formId = $form.prop( 'id' );
        var formClass = $form.prop( 'class' );

        formDetails +=
            "\n\nFORM NAME: " + formName +
            "\nFORM TITLE: " + formTitle +
            "\nFORM ID: " + formId +
            "\nFORM CLASS: " + formClass +
            "\nFORM HIDDEN INPUT:\n" + hidden.join( "\n" );
    }

    var tempTitle =
        "TAG: " + tagName +
        "\nTITLE: " + title +
        "\nID: " + id +
        "\nCLASS: " + cls;

    if ( 'SELECT' === tagName ) {
        $tag.find( 'option' ).each( function( index, el ) {
            options.push( el.value );
        } );

        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type +
            "\nSELECT OPTIONS:\n\t" + options;

    } else if ( 'A' === tagName ) {
        tempTitle +=
            "\nHTML: " + $tag.html();

    } else {
        tempTitle +=
            "\nNAME: " + name +
            "\nVALUE: " + value +
            "\nTYPE: " + type;
    }

    tempTitle += formDetails;

    $tag.prop( 'title', tempTitle );
    $tag.on( 'mouseout', function() {
        $tag.prop( 'title', title );
    } )
} );
— イゴールパラ
ソース
素晴らしい機能！ありがとう
— Mohamad Hamouday 2017年
6

jQueryは通常のJSフォーム要素への参照を保持し、これにはフォームのすべての子要素への参照が含まれます。あなたは単に参照をつかんで先に進むことができます：

var someForm = $('#SomeForm');

$.each(someForm[0].elements, function(index, elem){
    //Do something here.
});
— ロン・シムズII
ソース
5

これは私のお気に入りの機能で、私にとっては魅力のように機能します！

入力、選択、テキストエリアのすべてのデータを含むオブジェクトを返します。

そして、要素名else Id elseクラスを探すことでオブジェクト名を取得しようとしています。

var All_Data = Get_All_Forms_Data();
console.log(All_Data);

関数：

function Get_All_Forms_Data(Element)
{
    Element = Element || '';
    var All_Page_Data = {};
    var All_Forms_Data_Temp = {};
    if(!Element)
    {
        Element = 'body';
    }

    $(Element).find('input,select,textarea').each(function(i){
        All_Forms_Data_Temp[i] = $(this);
    });

    $.each(All_Forms_Data_Temp,function(){
        var input = $(this);
        var Element_Name;
        var Element_Value;

        if((input.attr('type') == 'submit') || (input.attr('type') == 'button'))
        {
            return true;
        }

        if((input.attr('name') !== undefined) && (input.attr('name') != ''))
        {
            Element_Name = input.attr('name').trim();
        }
        else if((input.attr('id') !== undefined) && (input.attr('id') != ''))
        {
            Element_Name = input.attr('id').trim();
        }
        else if((input.attr('class') !== undefined) && (input.attr('class') != ''))
        {
            Element_Name = input.attr('class').trim();
        }

        if(input.val() !== undefined)
        {
            if(input.attr('type') == 'checkbox')
            {
                Element_Value = input.parent().find('input[name="'+Element_Name+'"]:checked').val();
            }
            else if((input.attr('type') == 'radio'))
            {
                Element_Value = $('input[name="'+Element_Name+'"]:checked',Element).val();
            }
            else
            {
                Element_Value = input.val();
            }
        }
        else if(input.text() != undefined)
        {
            Element_Value = input.text();
        }

        if(Element_Value === undefined)
        {
            Element_Value = '';
        }

        if(Element_Name !== undefined)
        {
            var Element_Array = new Array();
            if(Element_Name.indexOf(' ') !== -1)
            {
                Element_Array = Element_Name.split(/(\s+)/);
            }
            else
            {
                Element_Array.push(Element_Name);
            }

            $.each(Element_Array,function(index, Name)
            {
                Name = Name.trim();
                if(Name != '')
                {
                    All_Page_Data[Name] = Element_Value;
                }
            });
        }
    });
    return All_Page_Data;
}
— モハマドハモデー
ソース
いいですが、 "Element_Value = jQuery（ 'input [name ="' + Element_Name + '"]：checked'）。val（）;"には微妙なバグがあります。Element_Nameは実際にはノードIDまたはクラスである場合があります。その場合、要素は見つかりません。
— Rafael Werlang
1
正解、修正しました！
— Mohamad Hamouday
4 
var $form_elements = $("#form_id").find(":input");

送信ボタンを含むすべての要素は、変数$ form_elementsに含まれています。

— ヤン
ソース
2
それらにどのようにアクセスしますか？
— Ngenazy 2017
3

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

$('form[name=' + formName + ']').find(':input')
— user3770276
ソース
1

この機能をお試しください

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>");
    }
});

楽しい ：）

— アーメド・ジャマル
ソース
0

このようなものを試してください：

<form action="/" id="searchForm">
<input type="text" name="s" placeholder="Search...">
<input type="submit" value="Search">
</form>
<!-- the result of the search will be rendered inside this div -->
<div id="result"></div>

<script>
// Attach a submit handler to the form
$( "#searchForm" ).submit(function( event ) {

  // Stop form from submitting normally
event.preventDefault();

// Get some values from elements on the page:
var $form = $( this ),
term = $form.find( "input[name='s']" ).val(),
url = $form.attr( "action" );

// Send the data using post
var posting = $.post( url, { s: term } );

// Put the results in a div
posting.done(function( data ) {
  var content = $( data ).find( "#content" );
  $( "#result" ).empty().append( content );
    });
  });
</script>

input []の使用に注意してください

— スリナート・シャー
ソース
これは
— textareas
0

すべての入力：

var inputs = $("#formId :input");

すべてのボタン

var button = $("#formId :button")
— DLMAN
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.