Блог

Итак, я пытаюсь предоставить пользовательский интерфейс в HTML-страницу, в которой пользователь может ввести число в поле ввода и нажмите применить (используя addRowsForm), чтобы увидеть ряды различных полей ввода, которые прилагаются к другой отдельной форме (по имени createRecordForm) и потом подавать эту форму (в том числе всех тех, кто приложил входа и два других скрытых полей) с помощью AJAX.

Моя проблема в том, что я не могу найти способ сгруппировать данные и опубликовать их из-за непредсказуемого количества полей ввода, которые будут добавлены в зависимости от взаимодействия пользователя со страницей. Мы очень ценим вашу помощь.

Вот мои коды:

Форма добавления

 lt;form action="#" name="addRowsForm" id="addRowsForm" method="post"gt;  lt;div class="form-group"gt;  lt;input type="number" min="1" max="10" name="addRowCounter" id="addRowCounter"gt;  lt;/divgt;  lt;button type="submit" name="applyBtn" id="applyBtn"gt;Applylt;/buttongt; lt;/formgt;  

Форма записи для создания

 lt;table class="table table-bordered table-striped table-sm"gt;  lt;thead class="bg-brand-4th-color"gt;  lt;thgt;Link Typelt;/thgt;  lt;thgt;Linklt;/thgt;  lt;thgt;Recorded Timelt;/thgt;  lt;thgt;Video Visibilitylt;/thgt;  lt;/theadgt;  lt;form action="" method="POST" name="createRecordForm" id="createRecordForm"gt;  lt;input type="hidden" name="ats_id" value="{{atsIdForFrag}}"gt;  lt;input type="hidden" name="tot_rows" value=""gt;  lt;tbody id="tBody"gt;  lt;/tbodygt;  lt;tfootgt;  {# submit btn #}  lt;trgt;  lt;td colspan="4"gt;  lt;div class="form-group"gt;  lt;button class="btn btn-success" type="submit" name="create_recorded_session_btn" id="create_recorded_session_btn"gt;Createlt;/buttongt;  lt;/divgt;  lt;/tdgt;  lt;/trgt;   lt;/tfootgt;  lt;/formgt; lt;/tablegt;  

Часть Javascript:

 lt;scriptgt;  $( document ).ready(  function(){  $("#addRowsForm").on("submit", function(e) {  e.preventDefault();  var rowCounter = $("input[name=addRowCounter]").val();  $("input[name=tot_rows]").val(rowCounter);  //reset any previous content  $("#tBody").html('');  for (var i = 1; i lt;= rowCounter; i  )   {  var newRowContent =   "lt;trgt;lt;tdgt;lt;div class='form-group p-0 m-0'gt;lt;select class='form-control' name='link_type_row_" i "' requiredgt;lt;option value='google_drive' selectedgt;Google Drivelt;/optiongt;lt;/selectgt;lt;/divgt;lt;/tdgt;lt;tdgt;lt;div class='form-group p-0 m-0'gt;lt;input class='form-control' type='text' name='link_row_" i "' value='' requiredgt;lt;/divgt;lt;/tdgt;lt;tdgt;lt;div class='form-group p-0 m-0'gt;lt;input type='datetime-local' name='datetime_row_" i "' class='form-control' required/gt;lt;/divgt;lt;/tdgt;lt;tdgt;lt;div class='form-check'gt;lt;input class='form-check-input' type='radio' name='visibilityRadio_row_" i "' id='showOption_row_" i "' value='show'gt;lt;label class='form-check-label' for='showOption_row_" i "'gt;Show to studentlt;/labelgt;lt;/divgt;lt;div class='form-check'gt;lt;input class='form-check-input' type='radio' name='visibilityRadio_row_" i "' id='dontShow_row_" i "' value='dont_show'gt;lt;label class='form-check-label' for='dontShow_row_" i "'gt;Don't show to studentlt;/labelgt;lt;/divgt;lt;/tdgt;lt;/trgt;";  $("#tBody").append(newRowContent);  }    $("#createRecordForm").on("submit", function(e) {  e.preventDefault();    var ats_id = $("input[name=ats_id]").val();  var tot_rows = $("input[name=tot_rows]").val();    // here is my broblem, I need to change this hard-coded lines into dynamic data and process it in php  var link_type_row_1 = $("select[name=link_type_row_1]").val();  var link_row_1 = $("input[name=link_row_1]").val();  var datetime_row_1 = $("input[name=datetime_row_1]").val();  var visibilityRadio_row_1 = $("input[name=visibilityRadio_row_1]:checked").val();    var link_type_row_2 = $("select[name=link_type_row_2]").val();  var link_row_2 = $("input[name=link_row_2]").val();  var datetime_row_2 = $("input[name=datetime_row_2]").val();  var visibilityRadio_row_2 = $("input[name=visibilityRadio_row_2]:checked").val();    var url = "{{ path('ao__frg_persist_st_rec_session')|escape('js') }}";  var type = "POST";    $.ajax({  url : url,  type: type,  data : {  'ats_id': ats_id,  'tot_rows': tot_rows,    'link_type_row_1': link_type_row_1,  'link_row_1': link_row_1,  'datetime_row_1': datetime_row_1,  'visibilityRadio_row_1': visibilityRadio_row_1,    'link_type_row_2': link_type_row_2,  'link_row_2': link_row_2,  'datetime_row_2': datetime_row_2,  'visibilityRadio_row_2': visibilityRadio_row_2  },    success: function(returnedMsg) {  // do something  }  });   });   });   });  lt;/scriptgt;  

[UPDATE : Check my answer below this paragraph] If I implement the batch approach as suggested by @Kinglish, I will end up having a big single radio while each row should have its own radio input separately from the rest.

[РЕШЕНИЕ ПРОБЛЕМЫ С ОБНОВЛЕНИЕМ ВЫШЕ] Поэтому я использовал номер индекса цикла, чтобы сохранить уникальное имя и идентификатор для радиовходов каждой строки. Теперь строка 1 имеет входное имя/идентификатор visibility_radio_row_1, а имя/идентификатор 2-й строки-visibility_radio_row_2. Затем я использовал селектор подстановочных знаков ^ и свойство :проверено, чтобы указать значение проверенного радио в каждой строке независимо от других строк.

 let obj = [];  $('.data-group').each(function() {  obj.push({  link_type: $(this).find('select[name="link_type_row"]').val(),  link: $(this).find('input[name="link_row"]').val(),  created_at: $(this).find('input[name="datetime_row"]').val(),  is_active: $(this).find('input[name^="visibilityRadio_row"]:checked').val()  })  })  

Я бы подошел к этому по-другому. Учтите, что вы можете обрабатывать их пакетами, а не конечным циклом. Не переписывая свой сценарий, посмотрите, как они обрабатываются. в итоге вы получаете массив объектов, которые отображаются в том порядке, в каком они находятся в вашей форме. Это избавляет от необходимости добавлять число в каждое поле. В удаленном скрипте, который их получает, вы можете просто просмотреть их и, при желании, добавить номер в этот момент.

 $(document).ready(function() {  $('.submit').click(function() {  let obj = [];  $('.data-group').each(function() {  obj.push({  name: $(this).find('input[name="name"]').val(),  gender: $(this).find('select[name="gender"]').val(),  favorite_color: $(this).find('input[name="favorite_color"]').val()  })  })  console.log('obj:', obj);  }) })  // I accidentally did this in vanillaJS first, so for posterity, here is that version: /* window.addEventListener('DOMContentLoaded', () =gt; {  document.querySelector('.submit').addEventListener('click', () =gt; {  let obj = [];  document.querySelectorAll('.data-group').forEach(e =gt; {  obj.push({  name: e.querySelector('input[name="name"]').value,  gender: e.querySelector('select[name="gender"]').value,  favorite_color: e.querySelector('input[name="favorite_color"]').value  })  })  console.log('obj:', obj);  }) }) */ 

 lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class='data-group'gt;  lt;input name='name' value='john' /gt;  lt;select name='gender'gt;  lt;option selected value='this'gt;thislt;/optiongt;  lt;option value='that'gt;thatlt;/optiongt;  lt;option value='other'gt;otherlt;/optiongt;  lt;/selectgt;  lt;input name='favorite_color' value='blue' /gt; lt;/divgt;   lt;div class='data-group'gt;  lt;input name='name' value='mary' /gt;  lt;select name='gender'gt;  lt;option value='this'gt;thislt;/optiongt;  lt;option value='that' selectedgt;thatlt;/optiongt;  lt;option value='other'gt;otherlt;/optiongt;  lt;/selectgt;  lt;input name='favorite_color' value='green' /gt; lt;/divgt; lt;hrgt; lt;button class='submit'gt;clicklt;/buttongt;