javascript - 如何迭代多个表单来获取输入的每个值？

Question

我当前使用的代码会迭代每个表单，但在获取输入类型为“复选框”的值时遇到问题。我也不想获取空值。

这是我的 JavaScript 代码:

var params = "";

for (var i=0; i<document.carrierDetails.elements.length; i++){

         var fieldName = document.carrierDetails.elements[i].id;
         var fieldValue = document.carrierDetails.elements[i].value;

         //skips emtpy values      
         if(fieldValue == ""){
               continue;
         }
         else{
               params += "&" + fieldName + "=" + fieldValue;
         }
}

这是我的表单 HTML 代码:

 <form name = safety>
      <div class="divTableRow">
         <div class="divTableCell">Forwarder MC #:</div>
            <div class="divTableCell">
              <input type="text" id="forwarderMC" value="${forwarderMC}">
            </div>
            <div class="divTableCell">DUNS Number:</div>
            <div class="divTableCell">
            <input type="text" id="dunsNumber" value="${dunsNumber}">
            </div>
      </div>
      <div class="divTableRow">
            <div class="divTableCell">URL:</div>
            <div class="divTableCell">
            <input type="text" id="companyURL" value="${companyURL}">
            </div>
            <div class="divTableCell">On Time Goal %:</div>
            <div class="divTableCell">
            <input type="text" id="onTimePct" value="${onTimePct}">
            </div>
      </div>
      <div class="divTableRow">
            <div class="divTableCell">Oversize Factor:</div>
            <div class="divTableCell">
            <input type="text" id="oversizeFactor" value="${oversizeFactor}">
            </div>
             <div class="divTableCell">Container Yard:</div>
            <div class="divTableCell">
            <input type="checkbox" id="containerYard" value="${containerYard}" style="float: left; width:auto;">
            </div>
      </div>
</form>

Answer 1

或者使用 Javascript，您可以执行类似的操作并将它们存储在数组中。

const form = document.querySelector('form[name=safety]');

const inputEls = [...form.querySelectorAll('input[type=text],input[type=checkbox]:checked')]
const data = inputEls.map(input => input.value)
console.log(data)

// OR

const inputEls2 = form.querySelectorAll('input[type=text],input[type=checkbox]:checked');
const data2 = [];
inputEls2.forEach(input => data2.push(input.value));


console.log(data2)

<form name="safety">
  <div class="divTableRow">
    <div class="divTableCell">Forwarder MC #:</div>
    <div class="divTableCell">
      <input type="text" id="forwarderMC" value="${forwarderMC}">
    </div>
    <div class="divTableCell">DUNS Number:</div>
    <div class="divTableCell">
      <input type="text" id="dunsNumber" value="${dunsNumber}">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell">URL:</div>
    <div class="divTableCell">
      <input type="text" id="companyURL" value="${companyURL}">
    </div>
    <div class="divTableCell">On Time Goal %:</div>
    <div class="divTableCell">
      <input type="text" id="onTimePct" value="${onTimePct}">
    </div>
  </div>
  <div class="divTableRow">
    <div class="divTableCell">Oversize Factor:</div>
    <div class="divTableCell">
      <input type="text" id="oversizeFactor" value="${oversizeFactor}">
    </div>
    <div class="divTableCell">Container Yard:</div>
    <div class="divTableCell">
      <input type="checkbox" id="containerYard" style="float: left; width:auto;">
    </div>
  </div>
</form>