How can iterate through multiple forms to grab every value entered?

Question

The current code I am using iterates through every form, but I am having issues getting the values that have input type "checkbox". I also do not want grab empty values.

Here is my Javascript code:

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;
         }
}

Here is my form HTML code:

 <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

If using JQuery then: var params = $('form[name="safety"]').serialize()

and also, please rewrite the form tag as <form name="safety"> because as far as I remember the whitespace around the equals sign near the attributes does matter - the DOM parser (libxml or smth. similar) understands it as a new attribute.

Answer 2

Or with Javascript you do something like this and store them in array.

 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>