CODEWITHSUNDEEP
javascripthtmlforms
cela
cela

Reputation: 2500

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

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>

Upvotes: 0

Views: 95

Answers (2)

VilleKoo
VilleKoo

Reputation: 2854

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>

Upvotes: 1

EvgenyKolyakov
EvgenyKolyakov

Reputation: 3634

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.

Upvotes: 1

Related Questions