1

だから私はこのようなフォームを持っています:

<form>
  <input name="name" value="A. Hitchcock">
  <input name="email" value="a.hitchcock@psychose.com">
  <input name="name" value="Q. Tarantino">
  <input name="email" value="q.tarantino@killbill.com">
  ...
</form>

とてもシンプルなもの。それは私が私の顧客から得ることを可能にしnameますemail。namejQuery を使用すると、フォームにさらに顧客 (および)を追加できるボタンがありますemail。

フォームが変更されるたびにこれらのデータをエコーする必要があるため、次のコードを使用しました。

$('.form-horizontal').on('change','input', function(){
  var dataArray = $('#list-items').serializeArray();
});

serializeArray()すべてのデータを配列にシリアル化できます。

私の問題は、これを使用してこれらのデータをこのように表示することserializeArray()です:

  • A. Hitchcockの電子メール アドレス: a.hitchcock@psychose.com。
  • Q. Tarantinoの電子メール アドレス: q.tarantino@killbill.com。

これを行う方法について何か助けてください。

4

2 に答える 2

1

ペアを親でラップし、serializeArray() を使用して無視することをお勧めします

<form>
    <div class="person">
        <input name="name[]" value="A. Hitchcock">
        <input name="email[]" value="a.hitchcock@psychose.com">
    </div>
    <div class="person">
        <input name="name[]" value="Q. Tarantino">
        <input name="email[]" value="q.tarantino@killbill.com">
    </div>
</form>

次に、グループから値をマップします。

var res = $('.person').map(function () {
    var $inputs = $(this).find('input');
    return '<li>' + $inputs.eq(0).val() + ' has this email address :' + $inputs.eq(1).val() + '</li>'
}).get();

$('#list').append(res.join(''));

DEMO

serializeArray() によって作成されたオブジェクトは次のようになります。

[{
    "name": "name[]",
    "value": "A. Hitchcock"
}, {
    "name": "email[]",
    "value": "a.hitchcock@psychose.com"
}, {
    "name": "name[]",
    "value": "Q. Tarantino"
}, {
    "name": "email[]",
    "value": "q.tarantino@killbill.com"
}]

したがって、それらを解析するには、名前と電子メールを取得するためにペアリング インデックスが必要になります。

本当にやりたい場合は、forループを使用できます。

var res= [];
for( var i=0; i< arr.length; i=i+2){
     res.push('<li>' + arr[i].value + ' has this email address :' + arr[i+1].value + '</li>');
}
于 2015-07-25T23:20:56.430 に答える
1

HTML コードを何も変更せずに、次のコードのようにnamesとemailsを 2 つに分離し、単純なループArraysで必要に応じてそれらを連結するだけです。for

完全な Js :

$('.form-horizontal').on('change','input', function(){  
    var names = $("form input[name='name']").serializeArray();
    var emails = $("form input[name='email']").serializeArray();

    for(var i=0;i<=names.length;i++){
        alert(names[i].value+" has this email address : "+emails[i].value);
    }
});

お役に立てば幸いです。

于 2015-07-25T23:24:43.110 に答える