Question

我试图从我在HTML中创建的表单中获取值：我使用Javascript尝试从表单中获取值，我尝试了多种获取值的方法，此时它就是

＆＃13;

$(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);
    }
  });
});

＆＃13;

<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>

＆＃13;

这是为了将表格中的值输出到我的VS输出窗口，但我什么都没得到。任何想法？

Answer 1

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

＆＃13;

each()

＆＃13;

$(document).ready(function() {
  $('#submit').click(function() {
    $('form :input').each(function() {
      console.log($(this).val());
    });
  });
});

＆＃13;

Answer 2

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

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

有关演示，请参阅此live example。

Answer 3

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);
            }
        });
    });

Answer 4

在所有输入中使用相同的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>

Answer 5

我建议您添加jquery-serialize-object引用，这样可以使事情变得更容易：

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

Here you can find other examples and the jquery-serialize-object library for downloading

Answer 6

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

从HTML表单中获取值

6 个答案: