从HTML表单获取值

Get values from HTML form

本文关键字：获取 表单 HTML      更新时间：2023-09-26

我试图从我在HTML中创建的表单中获得值:我使用Javascript从表单中获取值，我尝试了多种获取值的方法，目前是这个

$(document).ready(function() {
  $('#submit').click(function() {
    var x = document.getElementById("input");
    var text = "";
    var i;
    for (i = 0; i < x.length; i++) {
      console.log(x.elements[i].value);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
  First Name: <br/>
  <input type="text" name="firstName"/><br/>
  Last Name: <br/>
  <select id="lastName" style="text-align: center;">
  </select><br/>
  <p>Date of Birth:</p><br />
  Day: <br/>
  <select id="dayDropDown" style="text-align: center;">
  </select><br/>
  Month: <br/>
  <select id="monthDropDown" style="text-align: center;">
  </select><br/>
  Year: <br/>
  <select id="yearDropDown" style="text-align: center;">
  </select><br/>
  Country: <br/>
  <input type="text" name="country"/><br/>
</form>
<br/>
<button id="submit" type="button">Submit</button>

这意味着从表单输出值到我的VS输出窗口，但我什么也没得到。什么好主意吗?

由于您已经使用jQuery来附加您的事件处理程序，您也可以使用它来选择使用:input选择器的表单中的所有元素。从这里，您可以简单地使用each()循环遍历它们，并将它们的值输出到控制台，如下所示:

$(document).ready(function() {
  $('#submit').click(function() {
    $('form :input').each(function() {
      console.log($(this).val());
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
    First Name: <br/>
    <input type="text" name="firstName"/><br/>
    Last Name: <br/>
    <select id="lastName" style="text-align: center;">
    </select><br/>
    <p>Date of Birth:</p><br />
    Day: <br/>
    <select id="dayDropDown" style="text-align: center;">
    </select><br/>
    Month: <br/>
    <select id="monthDropDown" style="text-align: center;">
    </select><br/>
    Year: <br/>
    <select id="yearDropDown" style="text-align: center;">
    </select><br/>
    Country: <br/>
    <input type="text" name="country"/><br/>
</form>
<br/>
<button id="submit" type="button">Submit</button>

您可以使用jQuery并通过一个语句获取数据

var queryString = $('#input').serialize();

getElementsByTagName将解决您的问题。

修改后的代码:

 $(document).ready(function () {
        $('#submit').click(function () {
            var x = document.getElementsByTagName("input");
            var text = "";
            var i;
            for (i = 0; i < x.length; i++) {
                console.log(x[i].value);
            }
        });
    });

使用相同的Id名称与所有输入。你的javascript正在工作…

$(document).ready(function () {
        $('#submit').click(function () {
            var x = document.getElementById("input");
            var text = "";
            var i;
            for (i = 0; i < x.length; i++) {
                console.log(x.elements[i].value);
            }
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="input">
        First Name: <br/>
        <input type="text" name="firstName" id="input"/><br/>
        Last Name: <br/>
        <select id="lastName" style="text-align: center;" id="input">
        </select><br/>
        <p>Date of Birth:</p><br />
        Day: <br/>
        <select id="dayDropDown" style="text-align: center;" id="input">
        </select><br/>
        Month: <br/>
        <select id="monthDropDown" style="text-align: center;" id="input" >
       
  </select><br/>
        Year: <br/>
        <select id="yearDropDown" style="text-align: center;" id="input">
        </select><br/>
        Country: <br/>
        <input type="text" name="country" id="input"/><br/>
    </form>
    <br/>
    <button id="submit" type="button">Submit</button>

我建议您添加jquery-serialize-object引用，这样做可能会变得更容易一些:

 $('#input').submit(function(){
   var objForm = $(this).serializeObject();
    console.log(objForm);
 });

在这里您可以找到其他示例和jquery-serialize-object库下载

$(document).ready(function () {
    $('#submit').click(function () {
        $('form input, form select').each(function () {
            console.log($(this).val());
        });
    });
});
相关文章：