獲取陣列中所有選定的復選框以POST到API

我想通過以下方式將陣列中的所有選定復選框獲取POST到 APIurlencoded.append

urlencoded.append("typeID", (document.getElementById("type").value==1?"1":document.getElementById("type").value==2?"2":"3"));

<div id="myDiv">
  <input type="checkbox" name="name" value="1" id="type-id">
  <label>Food Deals</label>
  <br>
  <input type="checkbox" name="name" value="2" id="type-id">
  <label>Groceries Deals</label>
  <br>
  <input type="checkbox" name="name" value="3" id="type-id">
  <label>Karam Box</label>
  <br>
</div>

uj5u.com熱心網友回復：

嘗試這個：

    let checked = [];
    // To create array 
    document.querySelectorAll('#myDiv input[type="checkbox"]:checked').forEach(element => {
        checked.push(element.value);     
    });

    // To append values to formdata to POST
    let formData = new FormData();
    document.querySelectorAll('#myDiv input[type="checkbox"]:checked').forEach(element => {
        formData.append(element.name, element.value);
    });

    console.log('Array: '   checked);
    console.log('From FormData: '  formData.getAll('name'));

<div id="myDiv">
  <input type="checkbox" name="name" checked value="1" id="type">
  <label>Food Deals</label>
  <br>
  <input type="checkbox" name="name" checked value="2" id="type">
  <label>Groceries Deals</label>
  <br>
  <input type="checkbox" name="name" value="3" id="type">
  <label>Karam Box</label>
  <br>
</div>

uj5u.com熱心網友回復：

幾個注意事項：

1. 在HTML（和現實中）id 是唯一的。
2. 在JS選定的復選框中是checked和 不是selected。

為了收集所有檢查的值，您可以執行以下操作：

function demo() {
  document.querySelectorAll('input:checked').forEach(element => {
    console.log(element.value);
  });  
}

<div>  
  <label>1<input type="checkbox" value="1" /></label>
  <label>2<input type="checkbox" value="2" /></label>  
  <label>3<input type="checkbox" value="3" / ></label>
  <label>4<input type="checkbox" value="4" /></label>
  <label>5<input type="checkbox" value="5" /></label>  
  <label>6<input type="checkbox" value="6" / ></label>
</div>
<button type="button" onclick="demo()">"POST"</button>

uj5u.com熱心網友回復：

除了日志記錄之外，還要檢查您的DevTools Network選項卡。人們應該能夠檢查一個失敗的 (404)POST請求，https://stacksnippets.net/但正確發送了表單資料。

提供的方法使用一個表單元素，它攔截并阻止瀏覽器的表單提交，但從表單的method和action值中創建自己的 XHR 。

為了收集/聚合表單資料，它使用了FormDataWeb API。這樣的物件可以直接傳遞給 XHR 的send方法。

function createXHRFromForm(form) {
  const xhr = new XMLHttpRequest;

  xhr.open(
    form.method,
    form.action,
    true
  );
  xhr.setRequestHeader(
    'Content-Type',
    'application/x-www-form-urlencoded'
  );
  // xhr.onreadystatechange = function() {
  //   if (
  //     (this.readyState === XMLHttpRequest.DONE)
  //     && (this.status === 200)
  //   ) {
  //     // handle success
  //   }
  // };
  return xhr;
}
function createCheckboxFormData(form) {
  return Array
    .from(
      form.querySelectorAll('[type="checkbox"]:checked')
    )
    .reduce((formData, control) => {

      formData.append(control.name, control.value);
      return formData;

    }, new FormData);
}

function handleCheckboxDataSubmit(evt) {
  evt.preventDefault();
  
  const form = evt.currentTarget;

  const xhr = createXHRFromForm(form);
  const formData = createCheckboxFormData(form);

  console.clear();
  console.log({
    entries: [...formData.entries()],
    name: formData.getAll('name'),
  });
  xhr.send(formData);

  return false;
}

function main() {
  document
    .querySelector('form[name="myForm"]')
    .addEventListener('submit', handleCheckboxDataSubmit);
}
main();

:not([type="submit"]) {
  margin: 0!important;
  padding: 0!important;
}
body { zoom: .85; }
label { display: block; cursor: pointer; }
[type="submit"] { margin-top: 3px; }

<form name="myForm" action="/" method="post">
  <label>
    <input type="checkbox" name="name" value="1" checked/>
    <span class="label">Food Deals</span>
  </label>
  <label>
    <input type="checkbox" name="name" value="2" checked/>
    <span class="label">Groceries Deals</span>
  </label>
  <label>
    <input type="checkbox" name="name" value="3"/>
    <span class="label">Karam Box</span>
  </label>
  <button type="submit">POST</button>
</form>

標籤：javascript 接口

上一篇：如何在DevToolsJavaScript除錯器中搜索關鍵字？

下一篇：嘗試在畫布（JS）中更新計時器