在JSON中顯示動態欄位輸入-Jquery

我創建了一個表單，用戶可以在其中選擇“添加腿”并生成另一組相同的問題，但是所有這些輸入都不會輸出到 JSON 中，只有第一組問題會。如何回圈遍歷每個 div 并填充 JSON 并存盤在 Array 中以供以后參考？

這是我的代碼：

控制臺日志輸出

overUnder[]: "Over"
playerName[]: "dsf"
statAmount[]: "123"
statType[]: "Points"

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div id="legs[]""><input type="text" id="name" name="playerName[]" placeholder="Enter player name" required=""/><select  id="statType" name="statType[]"><option id="1">Points</option><option id="2">Rebounds</option><option id="3">Assists</option></select><select  id="overUnder" name ="overUnder[]"><option id="over">Over</option><option id="under">Under</option></select><input type="number" id="amount"  name="statAmount[]" required=""/><a href="javascript:void(0);"  title="Remove field">Remove Leg</a></div>'
  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x  ; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

function convertFormToJSON(form) {
  const array = $(form).serializeArray(); // Encodes the set of form elements as an array of names and values.
  const json = {};
  $.each(array, function() {
    json[this.name] = this.value || "";
  });
  return json;
}

$("#bet-slip").on("submit", function(e) {
  e.preventDefault();
  const form = $(e.target);
  console.log(form);
  const json = convertFormToJSON(form);
  console.log(json);
});

<form id="bet-slip">
  <div class="field_wrapper">
    <div id="legs[]">
      <input type="text" id="name" name="playerName[]" placeholder="Enter player name" required="" />
      <select class="statType" id="statType" name="statType[]">
        <option id="1">Points</option>
        <option id="2">Rebounds</option>
        <option id="3">Assists</option>
      </select>
      <select class="overUnder" id="overUnder" name="overUnder[]">
        <option id="over">Over</option>
        <option id="under">Under</option>
      </select>
      <input type="number" id="amount" class="amount" name="statAmount[]" required="" />
      <a href="javascript:void(0);" class="add_button" title="Add field">Add Leg</a>
    </div>
  </div>
  <button type="submit">Submit Legs</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

uj5u.com熱心網友回復：

你可以減少陣列

function convertFormToJSON(form) {
  const vals = $(form).serializeArray(); // Encodes the set of form elements as an 
  return vals.reduce((acc,cur) => {
    if (cur.name.startsWith('playerName')) {
      acc.push({[cur.name]:cur.value})
    }
    else acc[acc.length-1][cur.name] = cur.value
    return acc;
  },[])
}

在選擇中也更改id=為value=

顯示代碼片段

$(document).ready(function() {
  var maxField = 10; //Input fields increment limitation
  var addButton = $('.add_button'); //Add button selector
  var wrapper = $('.field_wrapper'); //Input field wrapper
  var fieldHTML = '<div id="legs[]""><input type="text" id="name" name="playerName[]" placeholder="Enter player name" required=""/><select  id="statType" name="statType[]"><option id="1">Points</option><option id="2">Rebounds</option><option id="3">Assists</option></select><select  id="overUnder" name ="overUnder[]"><option id="over">Over</option><option id="under">Under</option></select><input type="number" id="amount"  name="statAmount[]" required=""/><a href="javascript:void(0);"  title="Remove field">Remove Leg</a></div>'
  var x = 1; //Initial field counter is 1

  //Once add button is clicked
  $(addButton).click(function() {
    //Check maximum number of input fields
    if (x < maxField) {
      x  ; //Increment field counter
      $(wrapper).append(fieldHTML); //Add field html
    }
  });

  //Once remove button is clicked
  $(wrapper).on('click', '.remove_button', function(e) {
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
  });
});

function convertFormToJSON(form) {
  const vals = $(form).serializeArray(); // Encodes the set of form elements as an 
  return vals.reduce((acc,cur) => {
    if (cur.name.startsWith('playerName')) {
      acc.push({[cur.name]:cur.value})
    }
    else acc[acc.length-1][cur.name] = cur.value
    return acc;
  },[])
}

$("#bet-slip").on("submit", function(e) {
  e.preventDefault();
  const form = $(e.target);
//  console.log(form);
  const json = convertFormToJSON(form);
  console.log(json);
});

<form id="bet-slip">
  <div class="field_wrapper">
    <div id="legs[]">
      <input type="text" id="name" name="playerName[]" placeholder="Enter player name" required="" />
      <select class="statType" id="statType" name="statType[]">
        <option value="1">Points</option>
        <option value="2">Rebounds</option>
        <option value="3">Assists</option>
      </select>
      <select class="overUnder" id="overUnder" name="overUnder[]">
        <option id="over">Over</option>
        <option id="under">Under</option>
      </select>
      <input type="number" id="amount" class="amount" name="statAmount[]" required="" />
      <a href="javascript:void(0);" class="add_button" title="Add field">Add Leg</a>
    </div>
  </div>
  <button type="submit">Submit Legs</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

標籤：jQuery 数组 json

上一篇：JOLT轉換資料創建嵌套對

下一篇：從Angular的陣列中獲取資料物件