Как обрабатывать отдельные FormData в реплицированной форме? ⇐ Jquery

[Anonymous]

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

Ожидается : чтобы получить данные formData из первой формы панели, и я сохранил их в скрытом элементе ввода внутри первого formData, а также для n панелей, которых я хочу добиться, затем для сохранения панелей я хочу перебрать каждую Panels и получите данные formData, хранящиеся в каждой панели.
Панель мониторинга 1

• panel 1 {"type": "1","chartType":"bar","panellogsource":"19","fieldSelected":["dst_as","dst_mask"],"timeWindow":"Последние 15 минут"
• panel 2 {"type":"2","aggregateType":"count","panellogsource":"19","fieldSelected":["dst_port","dst_tos"],"timeWindow": «Последние 15 минут»

Фактическое: я могу установить данные для первой панели, но после заполнения второй панель, форма получает данные предыдущей (первой) панели. я хочу разделить панели formData для каждой панели.
Панель мониторинга 1

• панель 1 {"type":" 1","chartType":"bar","panellogsource":"19","fieldSelected":["dst_as","dst_mask"],"timeWindow":"Последние 15 минут"
• panel 2 {"type":"1","chartType":"bar","panellogsource":"19","fieldSelected":["dst_as","dst_mask"],"timeWindow":" Последние 15 минут"} (то же содержание для второй панели)

Drag&Drop ${layoutSize}

Edit Content

[*]

Size:












[/url]

[/list]









Edit Panel










Panel Data







Close






panel_create.jsp




Type*
Select
Chart
Aggregation




Chart / Aggregate*
Select Chart

${option.displayText}


Select Aggregate

${option.displayText}




Log Source*
Select

${logSource.name}






Field*

















Add


Update





Функция js для добавления данных формы на каждую панель

function addPanelData() {
console.log("addPanelData");
// Iterate over each panel container
$('.panel').each(function(index) {
var formDataObject = {};
// Serialize the form data for the current panel
var formData = $(this).find('form').serializeArray();
console.log("formData: ", formData);
$.each(formData, function(i, field) {
if(field.name==='fieldSelected'){
if(!formDataObject[field.name]){
formDataObject[field.name]=[];
}
formDataObject[field.name].push(field.value);
}else{
formDataObject[field.name] = field.value;
}
});

console.log(`Form Data for Panel ${index}:`, formDataObject);

// Convert formDataObject to JSON string and store it in the hidden input field panelData
$(this).find('input[id="panelData"]').val(JSON.stringify(formDataObject));
$(this).find('form')[0].reset();
});
}



Подробнее здесь: https://stackoverflow.com/questions/790 ... cated-form