jqueryは特定のフォームからすべての入力を取得します


84

特定のフォームからのすべての入力を入力する方法はありますか?たとえば、次のようなものがあります。

<form id="unique00">
  <input type="text" name="whatever" id="whatever" value="whatever" />
  <div>
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
    <input type="submit" value="qweqsac" />
  </td></tr></table>
</form>
<form id="unique01">
  <div>
    <input type="text" name="whatever" id="whatever" value="whatever" />
    <input type="checkbox" name="whatever" id="whatever" value="whatever" />
  </div>
  <table><tr><td>
    <input type="hidden" name="whatever" id="whatever" value="whatever" />
  </td></tr></table>
  <select>blah...</select>
  <input type="submit" value="qweqsac" />
</form>
etc forms... forms...

*注:フォームごとに入力とタイプの量が異なり、HTML構造も異なる場合があります

それで、特定のフォームIDから入力を入力する方法はありますか?たとえば、特定のフォームIDから[送信]ボタンをクリックすると、jqueryはそれらのフォームID内のすべての入力を入力します。現在私がしていることはこのようなものです:

$("form").submit(function(){ return validateForm($(this)) });
function validateForm(form){
var retVal = true;
var re;
$.each(form.serializeArray(), function(i, field) {
  var input = $('input[name='+field.name+']');
  field.value = $.trim(field.value);
  switch(field.name){
    case "name" :
        and another cases...
      }
    })
 }

それはうまくいきましたが、その場合、私はfield.nameとfield.valueだけを取得します。実際に必要なのは、入力要素ごとにjqueryオブジェクトが必要なので、それらのcss、id、name、およびにアクセスできます。それらの入力要素をアニメーション化することさえ

これには何か方法はありますか?

事前にお知らせいただきありがとうございます!そして

回答:


180

フォーム内のすべての入力を反復処理するには、次のようにします。

$("form#formID :input").each(function(){
 var input = $(this); // This is the jquery object of the input, do what you will
});

これは、jquery :inputセレクターを使用して、すべてのタイプの入力を取得します。テキストだけが必要な場合は、次のことができます。

$("form#formID input[type=text]")//...


3
私が思う:入力は、そのために動作しますが、そうでなければ、行うことができます:$("form#formID input[type=text],form#formID select")
TJB

上記の最初の回答のタイプミスに注意してください。$( "from should be $(" form
Mitch

1
$("form#formID :input").eachinputタイプ、selectタイプ、さらにはbuttonタイプ入力を出力します。少なくとも私のコードではそうです。
TARKUS 2015

3
@TARKUSinput:input。$( ":input")は、すべてのjQueryフォーム要素を選択します。$( "input")は、入力タグのみを選択します。
ジョナサンエルモア2016年

25

以下のコードは、フォーム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());
    }
);

1
このinput.val()を使用してテキストの値を取得していません。その中で私を助けてくれませんか?
dhavalThakor 2018年

私の悪い。ソリー私は出力のために間違った場所を見ていました。
dhavalThakor 2018年

3

HTMLフォームの「要素」属性を使用します

$.each($("form").elements, function(){ 
    console.log($(this));
    });

これで、「input、textarea、select ...」などの名前を指定する必要がなくなりました。


ドゥー!-情報が多すぎます。フォーム情報をより迅速に確認する方法を試してください$( "form:input")。each(function(index){console.log(index、this.type、th​​is.id、this.name、this.value、this.placeholder );});
ジュールバートー
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.