如何通過ajax發布多個附加的輸入欄位值-有解無憂

因此，我一直試圖在 html 頁面中提供一個用戶界面，用戶可以在其中輸入一個數字并點擊應用（使用 addRowsForm），以查看被附加到另一個單獨表單（命名為createRecordForm），然后通過 ajax 提交此表單（包括所有附加的輸入和其他兩個隱藏欄位）。

我的問題是我無法找到一種方法來對資料進行分組和發布，因為將添加的輸入欄位數量不可預測，具體取決于用戶與頁面的互動。非常感謝您的幫助。

這是我的代碼：

添加行表單

<form action="#" name="addRowsForm" id="addRowsForm" method="post">
   <div class="form-group">
      <input type="number" min="1" max="10" name="addRowCounter" id="addRowCounter">
   </div>
   <button type="submit" name="applyBtn" id="applyBtn">Apply</button>
</form>

創建記錄表

<table class="table table-bordered table-striped table-sm">
  <thead class="bg-brand-4th-color">
    <th>Link Type</th>
    <th>Link</th>
    <th>Recorded Time</th>
    <th>Video Visibility</th>
  </thead>
  <form action="" method="POST" name="createRecordForm" id="createRecordForm">
    <input type="hidden" name="ats_id" value="{{atsIdForFrag}}">
    <input type="hidden" name="tot_rows" value="">
    <tbody id="tBody">
    </tbody>
    <tfoot>
       {# submit btn #}
       <tr>
          <td colspan="4">
             <div class="form-group">
                <button class="btn btn-success" type="submit" name="create_recorded_session_btn" id="create_recorded_session_btn">Create</button>
              </div>
           </td>
        </tr>    
     </tfoot>
   </form>
</table>

Javascript 部分：

<script>
   $( 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 <= rowCounter; i  ) 
          {
            var newRowContent = 
              "<tr><td><div class='form-group p-0 m-0'><select class='form-control' name='link_type_row_" i "' required><option value='google_drive' selected>Google Drive</option></select></div></td><td><div class='form-group p-0 m-0'><input class='form-control' type='text' name='link_row_" i "' value='' required></div></td><td><div class='form-group p-0 m-0'><input type='datetime-local' name='datetime_row_" i "' class='form-control' required/></div></td><td><div class='form-check'><input class='form-check-input' type='radio' name='visibilityRadio_row_" i "' id='showOption_row_" i "' value='show'><label class='form-check-label' for='showOption_row_" i "'>Show to student</label></div><div class='form-check'><input class='form-check-input' type='radio' name='visibilityRadio_row_" i "' id='dontShow_row_" i "' value='dont_show'><label class='form-check-label' for='dontShow_row_" i "'>Don\'t show to student</label></div></td></tr>";
              $("#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
              }
            });     
          });           
        });         
      });
    </script>

[更新：在本段下方檢查我的答案] 如果我按照@Kinglish 的建議實施批處理方法，我最終將擁有一個大的單一收音機，而每一行都應該有自己的收音機輸入，與其他行分開。如何通過ajax發布多個附加的輸入欄位值

[以上更新問題的解決方案] 所以我使用回圈索引號來保留每行無線電輸入的唯一名稱和 ID。現在，第 1 行的輸入名稱/id 為visibilityRadio_row_1，第 2 行的名稱/id 為visibilityRadio_row_2。然后我使用^通配符選擇器和:checked屬性來定位每行中選中的單選的值，獨立于其他行。

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()
          })
        })

uj5u.com熱心網友回復：

我會以不同的方式處理這個問題。考慮到您可以批量處理這些，而不是有限回圈。在不重寫腳本的情況下，看看這些是如何處理的。您最終會得到一組物件，這些物件按照它們在表單中的順序出現。這消除了將數字附加到每個欄位的麻煩。在接收這些資訊的遠程腳本中，您可以遍歷它們，如果需要，在該點添加數字。

$(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', () => {
  document.querySelector('.submit').addEventListener('click', () => {
    let obj = [];
    document.querySelectorAll('.data-group').forEach(e => {
      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);
  })
})
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='data-group'>
  <input name='name' value='john' />
  <select name='gender'>
    <option selected value='this'>this</option>
    <option value='that'>that</option>
    <option value='other'>other</option>
  </select>
  <input name='favorite_color' value='blue' />
</div>


<div class='data-group'>
  <input name='name' value='mary' />
  <select name='gender'>
    <option value='this'>this</option>
    <option value='that' selected>that</option>
    <option value='other'>other</option>
  </select>
  <input name='favorite_color' value='green' />
</div>
<hr>
<button class='submit'>click</button>

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/372162.html

標籤：javascript 查询数组阿贾克斯附加

上一篇：在“運送到不同地址？”時為特定用戶角色添加費用。已在WooCommerce結帳上檢查

下一篇：val.foreach到達key.length2位后就不是函式了（已解決）