skip to Main Content

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>

2

Answers


  1. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search