Jquery - Iterate Form with queryselectorall to put input value into array

DevMD
November 7, 2023
117 views
0 votes
2 Answers

I Have an html page and function is JS

I noticed that myForms is a NodeList with two elements, form is 0 or 1, How do I retrieve the input values for each form?
I also tried with

var query = '' + myForms[form].id + ' :input');
var $inputs = $(query);

But at the console level I have an error -> Uncaught TypeError: $inputs[0].val is not a function

function next() {

var arrayOutput = new Array();
var myForms = document.querySelectorAll('[id^="form-"]');

   

myForms.forEach(form=>{
  var query = '#' + form.id + ' :input';
      var $inputs = $(query);
  var single = {};
  single.name = $inputs[0].val();
  single.yes = $inputs[1].val();
  single.no = $inputs[2].val();
  arrayOutput.push(single);
});

}

    <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<div class="container">
   <div id="34">
          <form id="form-34" method="post">
            <div class="col-xs-3">
              <div class="container">
                <label> Model
                  <span>
                    <input type="text", id="name" name="name"/>
                  </span>
                </label>
              </div>
              <input type="checkbox", id="yes" name="yes"/>
              <input type="checkbox", id="no" name="no"/>
            </div>
          </form>
        </div>
<div id="35">
          <form id="form-35" method="post">
            <div class="col-xs-3">
              <div class="container">
                <label> Model
                  <span>
                    <input type="text", id="name" name="name"/>
                  </span>
                </label>
              </div>
              <input type="checkbox", id="yes" name="yes"/>
              <input type="checkbox", id="no" name="no"/>
            </div>
          </form>
        </div>
    <button class="icon" onclick=next()>Next</button>
    </div>

Answers

The error you’re getting:

Uncaught TypeError: $inputs[0].val is not a function

Is because this returns a plain DOM element, not a jQuery object:

$inputs[0]

Though you can create a jQuery object from it:

$($inputs[0])

Or, alternatively, don’t use jQuery’s .val() and just get the .value from the DOM element.

For example:

function next() {
  var arrayOutput = new Array();
  var myForms = document.querySelectorAll('[id^="form-"]');

  myForms.forEach(form => {
    var query = '#' + form.id + ' :input';
    var $inputs = $(query);
    var single = {};
    single.name = $inputs[0].value;
    single.yes = $inputs[1].value;
    single.no = $inputs[2].value;
    arrayOutput.push(single);
  });

  console.log(arrayOutput);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div id="34">
    <form id="form-34" method="post">
      <div class="col-xs-3">
        <div class="container">
          <label>
             Model
             <span>
               <input type="text", id="name" name="name"/>
             </span>
           </label>
         </div>
         <input type="checkbox", id="yes" name="yes"/>
         <input type="checkbox", id="no" name="no"/>
       </div>
     </form>
   </div>
   <div id="35">
     <form id="form-35" method="post">
       <div class="col-xs-3">
         <div class="container">
           <label>
             Model
             <span>
               <input type="text", id="name" name="name"/>
             </span>
           </label>
         </div>
         <input type="checkbox", id="yes" name="yes"/>
         <input type="checkbox", id="no" name="no"/>
       </div>
     </form>
   </div>
   <button class="icon" onclick=next()>Next</button>
 </div>

You can get all the forms on the page using document.forms. This returns a HTMLCollection that can be turned into an array using the Spread syntax (…).

And then you can use the FormData constructor to get all the data in the form.

function next() {
  let array = [...document.forms].map(form => {
    let data = new FormData(form);
    let obj = {};
    [...data.entries()].forEach(entry => obj[entry[0]] = entry[1]);
    return obj;
  });
  console.log(array);
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<div class="container">
  <div id="34">
    <form id="form-34" method="post">
      <div class="col-xs-3">
        <div class="container">
          <label> Model
                  <span>
                    <input type="text", id="name" name="name"/>
                  </span>
                </label>
        </div>
        <input type="checkbox" id="yes" name="yes" />
        <input type="checkbox" id="no" name="no" />
      </div>
    </form>
  </div>
  <div id="35">
    <form id="form-35" method="post">
      <div class="col-xs-3">
        <div class="container">
          <label> Model
                  <span>
                    <input type="text" id="name" name="name"/>
                  </span>
                </label>
        </div>
        <input type="checkbox" id="yes" name="yes" />
        <input type="checkbox" id="no" name="no" />
      </div>
    </form>
  </div>
  <button class="icon" onclick=next()>Next</button>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Jquery – Iterate Form with queryselectorall to put input value into array

Answers