フォームフィールドから多次元配列を作成する

Question

フォームフィールドから多次元配列を作成しようとしています。これをjQueryでループして、その場で計算を実行できます。

フォームは追加出席者/参加者のオプションを削除しており、各出席者は、私はフィールド名とそのような配列を作成しようとしていますので、3つの入力を持っている私が収集するためのjQueryで、次の使用しています

attendees[0][name] = 'Name' 
attendees[0][email] = 'Email' 
attendees[0][type] = 'Normal' 

この配列は、フォーム内の入力の変更イベントです。

var values = $("input[name='attendees[]']").map(function() { 
    return $(this).val(); 
}).get(); 
console.log(values); 

alertはちょうどので、私はそれが働いていますが、私のバイオリンから見ることができるようにされていることを知っているにかかわらず、出席者にあるものの配列は常に空であるフィールド。

https://jsfiddle.net/b84s07x4/

Answer 1

あなたは非常に単純代わりに各行の最初の入力、tbody tr要素にmap()を使用し、必要なフォーム要素を取得するfind()を使用してこれを達成することができます。

classをフォーム要素に読み込ませることでセレクタを簡略化することもできます。そうでない場合は、name属性を使用してセレクタ文字列をハックして、その中に含まれている引用符をエスケープする必要があります。それはすぐに厄介になります。

これを試してみてください：これは私が必要とするもの、部分的にやるようだが、出席者を削除する場合に、第2のオブジェクトがまだある

function calculate() { 
    var attendees = $('.attendee-table > tbody > tr').map(function() { 
     return { 
      name: $(this).find('.attendee-name').val(), 
      email: $(this).find('.attendee-email').val(), 
      type: $(this).find('.attendee-type').val() 
     } 
    }).get(); 
    console.log(attendees); 
} 

Working example