无法从我的单选按钮/复选框中获取值

Question

createIrecButton.addEventListener("click", function (event) {
  event.preventDefault(); // prevent the form from submitting

  // get the form by its id
  const myForm = document.getElementById("myForm");

  // get the input elements from the form
  const inputs = myForm.querySelectorAll("input");

  // create an empty object to store the input values
  const data = {};

  // loop through the input elements
  inputs.forEach(function (input) {
  // get the input name and value
  const name = input.name;
  let value = "";

  // check if input is a radio button
  if (input.type === "radio") {
    // check if input is disabled or unchecked
    if (input.disabled || !input.checked) {
      value = "";
    } else {
      value = input.value;
    }
  } else if (input.tagName === "SELECT") {
    // check if input is disabled or no option selected
    if (input.disabled || input.selectedIndex === -1) {
      value = "";
    } else {
        value = input.options[input.selectedIndex].value;
    }
  } else if (input.type === "checkbox") {
    // checkbox input
    if (input.disabled || !input.checked) {
      value = "";
    } else {
      value = input.value;
    }
  } else {
    // input is not a radio button, checkbox, or select box
    value = input.value;
  }

  // add the name-value pair to the data object
  data[name] = value;
});

单选按钮最初是禁用的，但稍后会启用。即使选中单选按钮，我仍然只是返回“”的值。对不起，我很新。 这是一对单选按钮的示例：

<input
  id="phone1typeMobile"
  type="radio"
  name="phoneType1"
  value="Cell phone - "
  style="margin-right: 0"
  disabled        
/><label for="phone1typeMobile">M</label>
      
<input
  id="phone1typeLandline"
  type="radio"
  name="phoneType1"
  value="Landline - "
  style="margin-right: 0"
  disabled
/><label for="phone1typeLandline">L</label>

希望将值推入我的对象而不是仅仅返回“” 似乎无法弄清楚为什么它不记录价值。如果您需要更多信息，请告诉我。这是我的第一个编码项目。

Answer 1

这就是我希望表格在这种情况下的工作方式。使用 FormData.entries() 并创建您自己的对象。

在这个例子中，我创建了两个不同的对象（data1，data2）。第一个仅包含具有值的输入元素的键/值。第二个还有用于未选择/没有值的输入元素的键（和一个空字符串）。

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  // get all the (not disabled) data from the form
  let formData = new FormData(e.target);
  // create data object
  let data1 = {};
  // run through all entries and add to data object
  [...formData.entries()].forEach(entry => {
    data1[entry[0]] = entry[1];
  });
  console.log(data1);
  // if you need all the keys to be in the object
  // you can pre-populate the data object with empty values
  let data2 = {};
  [...e.target.elements].forEach(elm => {
    if (elm.name) data2[elm.name] = "";
  });
  // run through all entries and add to data object
  [...formData.entries()].forEach(entry => {
    data2[entry[0]] = entry[1];
  });
  console.log(data2);
});

<form name="form01">
  <input type="radio" name="phoneType1" value="Cell phone - " style="margin-right: 0" /><label for="phone1typeMobile">M</label>
  <input type="radio" name="phoneType1" value="Landline - " style="margin-right: 0" /><label for="phone1typeLandline">L</label>
  <label>Name: <input type="text" name="name"/></label>
  <label>Size: <select name="size">
  <option value="">Select a size</option>
  <option value="1">S</option>
  <option value="2">M</option>
  <option value="3">L</option>
  </select></label>
  <input type="submit" />
</form>