Передайте родительскую форму и данные модального окна на сервер с помощью AJAX

Question

У меня есть страница с динамической формой с несколькими строками таблицы, где пользователь обновляет статус, установив флажок для обновляемых строк. Когда нажимается кнопка обновления, я открываю окно мода для jquery, чтобы пользователь мог выбрать статус из выпадающего списка и ввести комментарии. Я могу передать данные модального окна на свой сервлет через AJAX, но я не знаю, как получить значения флажка.

Как передать значения флажка из родительской формы и дополнительных данных из модального окна в свой сервлет Java, чтобы я мог обновлять соответствующие записи базы данных? Я хотел бы использовать AJAX, чтобы родительская форма не перезагружалась для пользователя.

Заранее благодарен!

Модальные окна и обновление AJAX:

$(function() { 
    $("#dialog-form").dialog({ 
     autoOpen: false, 
     height: 'auto', 
     width: 'auto', 
     modal: true, 
     buttons: { 
      "Update Status": function() { 
       dataString = $("#statusForm").serialize(); 

       $.ajax({ 
        type: 'POST', 
        url: 'updateStatus', 
        data: dataString, 
        dataType: 'json', 
        success: function(data) {alert(data);} 
       }); 
       $(this).dialog("close"); 
      }, 
      Cancel: function() {$(this).dialog("close");} 
     }, 
     close: function() {$(this).dialog("close");} 
    }); 
    $("#update-status") 
      .button() 
      .click(function() { 
     $("#dialog-form").dialog("open"); 
    }); 
}); 

EDIT:

Как вы можете видеть, что есть 4 отмеченные элементы в фоновом режиме с модальным окном сверху с просьбой получить дополнительную информацию. Выбранные элементы необходимо обновить с помощью информации из модальных окон. Каждый флажок имеет свое собственное уникальное значение, соответствующее его идентификатору записи в таблице базы данных.

EDIT 2:

Родитель форма - HTML Фрагмент кода:

<form name="OptionList"> 
<table id="statusTable"> 
    <thead> 
     <tr> 
      <th>Option</th> 
      <th>Type</th> 
      <th>Timestamp</th> 
      <th>Entry Type</th> 
      <th>User Profile</th> 
     </tr> 
    </thead> 
    <tr> 
     <td><input type="checkbox" value="19"></td> 
     <td>DO</td> 
     <td>5/14/13 4:31 PM</td> 
     <td>A</td> 
     <td>user profile</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" value="61" ></td> 
     <td>DO</td> 
     <td>5/14/13 4:50 PM</td> 
     <td>A</td> 
     <td>user profile</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" value="37"></td> 
     <td>DO</td> 
     <td>5/14/13 5:03 PM</td> 
     <td>A</td> 
     <td>user profile</td> 
    </tr> 
    <tr> 
     <td><input type="checkbox" value="157"></td> 
     <td>DO</td> 
     <td>5/14/13 5:04 PM</td> 
     <td>A</td> 
     <td>user profile</td> 
    </tr> 
</table> 

Answer 1

Что вы делаете в данный момент seralizing всю форму и передать его к вашему модальному:

dataString = $("#statusForm").serialize();

Вместо того, что вам нужно сделать, это просто передать данные для строки, что вы заинтересованы. Для этой работы можно присвоить числовые идентификаторы для каждой строки и анализировать данные для флажка, имеющий тот родитель Я бы.

Смотреть это решение: passing cell value inorder to update table using ajax post