複数のフォームをループし、jqueryで入力値を取得する

Question

jqueryを使用して動的にフォームを生成しています。どのようにすべてのフォームをループし、入力値を警告することができますか？生成する

CODEは、フォームIは、IDによる入力フィールドの値を取得TRIED

$.ajax({ 
 
    method: 'GET', 
 
    url: 'api/PayrollSystem/GetEmployeeSalaryAmount?AdminId=' + 1, 
 
    success: function(data) { 
 

 
    if (Object.keys(data).length == 0) { 
 
     $.alert({ 
 
     title: 'Saved', 
 
     content: 'Account Number Saved!', 
 
     }); 
 
     var row = ('<tr ><td colspan="3" text-align="center"> <b>No Registered Users</b></td></tr>'); 
 
     $('.EmpTable').append(row); 
 
    } else { 
 
     $.each(data, function(index, value) { 
 
     var rows = ('<div id="form_div"><form method="post"><table class="table table-hover employee_table' + index + ' " align=center><thead><tr><td><b>Employee</td> <td><b>Amount</td></tr></thead><tbody><tr><td><b>' + value.FullName + '</b></td><td><input type="hidden" class="form-control Leavename" name="Leavename[]" value="Basic" placeholder="Enter Leave Name"> <input readonly class="form-control LeaveAmount" type="number" name="LeaveAmount[]" value=' + value.SalaryAmount + ' /><input class="form-control EmpId" type="hidden" name="Id[]" value=' + value.Id + ' /></td></tr><tr id="row' + index + 1 + '"><td><input type="text" class="form-control Leavename" name="Leavename[]" placeholder="Enter Leave Name"> </td><td> <input type="number" class="form-control LeaveAmount" name="LeaveAmount[]" placeholder="Enter Leave Amount"></td> </tr></tbody> </table> <input type="button" class="btn btn-success addRow" onclick="add_row(' + index + '); " value=" + Add More Payroll Item"></form> </div><hr />'); 
 

 
     $('.EmpTable').append(rows); 
 

 
     }); 
 

 
    } 
 

 
    } 
 
});

$('#saveAdj').click(function() { 
 
    $('form').each(function() { 
 

 
    alert($('.EmpId').val()); 
 
    }); 
 
});

Answer 1

$('#saveAdj').click(function() { 
    $('form').each(function() { 
    var thisForm = this; 
    alert($('.EmpId', thisForm).val()); 
    }); 
}); 

$('selector', container)あなたが唯一のコンテナから検索するのに役立ちます。

Answer 2

.EmpIdのどこに連絡先がありませんか。

each()メソッドに渡されるコールバック関数は、列挙されるコレクションにアクセスするための値が自動的に渡されます。これらの引数値を使用する場合は、as the second argumentをJQueryオブジェクトに渡すことで、そのコンテキストを指定できます。

$('#saveAdj').click(function() { 
    // JQuery's .each() method will automatically pass 3 arguments 
    // to the provided callback function: 
    // a reference to the index position of that element 
    // a reference to the element being enumerated at the moment 
    $('form').each(function(index, element) { 

    // The element argument can be passed as the second argument to 
    // the JQuery object (after the selector) to provide context for where to search 
    alert($('.EmpId', element).val()); 
    }); 
});