使用 queryselectorall 迭代表单以将输入值放入数组中-解网

问：

我有一个html页面，功能是JS

我注意到myForms是一个包含两个元素的NodeList，form是0或1，如何检索每个表单的输入值？我也试过

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

但是在控制台级别，我有一个错误-> 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>

javascript jquery 表单 jquery-selectors

您尝试在哪里使用最后一个代码片段？如果它在回调中，你不就是想要吗？如果它在该回调之外，那是什么？您是否尝试过阅读收到的错误消息？它告诉你什么？您能否将其更新为最小的可重现示例，作为可运行的代码片段，以演示您的尝试和遇到的问题？forEach()form.idform

0赞 freedomn-m 11/8/2023

但是在控制台级别，我有一个错误 - 错误是什么？您最后的查询丢失了。#

0赞 freedomn-m 11/8/2023

请注意，已经有多种久经考验的方法可以从表单中的“输入”中获取值，在jquery中，您可以使用：$("form").serialize();

0赞 DevMD 11/8/2023

jsfiddle.net/02ybws8p

0赞 mplungjan 11/8/2023

请点击编辑并更新我用相关代码制作的代码片段

答：

0赞 David 11/8/2023 #1

您收到的错误：

未捕获的 TypeError：$inputs[0].val 不是函数

这是因为这返回了一个普通的 DOM 元素，而不是一个 jQuery 对象：

$inputs[0]

虽然你可以从中创建一个jQuery对象：

$($inputs[0])

或者，或者，不要使用 jQuery，而只是从 DOM 元素中获取。.val().value

例如：

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>

0赞 chrwahl 11/8/2023 #2

您可以使用获取页面上的所有表单。这将返回一个 HTMLCollection，该 HTMLCollection 可以使用 Spread 语法（...）转换为数组。document.forms

然后，您可以使用 FormData 构造函数获取表单中的所有数据。

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>

上一个：ReferenceError：未定义 ClassicEditor（ckeditor5，ASP.NET MVC）

下一个：用值填充 123FormBuilder 字段

使用 queryselectorall 迭代表单以将输入值放入数组中

Iterate Form with queryselectorall to put input value into array

评论