用于名称和值的表单中的 Javascript foreach 输入答案

【问题标题】：Javascript foreach input in form for Name and Value用于名称和值的表单中的 Javascript foreach 输入
【发布时间】：2013-03-29 23:48:03
【问题描述】：

我只是在练习一些 javascript，而且我以前经常使用 JQuery！我没有使用原始 javascript 的主要经验，我想像学习 JQuery 一样学习它。我有一个简单的表单和一个 javascript 函数，可以在提交时使用，我想用我的函数获取表单中每个输入的名称和值，但它似乎不起作用，有人可以帮我吗？

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Practice</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Value = this.attribute('name').value;
                alert(Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="User" placeholder="Password" />
    <input type="submit" name="Submit" onclick="javascript:Get();" />
</form>
</body>
</html>

【问题讨论】：

标签： javascript html forms foreach

【解决方案1】：

您应该迭代到表单的children 并使用getAttribute 函数来获取属性值。

试试这个：

function Get() {
    var Form = document.getElementById('Form');         
    var childs = Form.children;         
    for(I = 0; I < childs.length; I++) {                    
        var Value = childs[I].getAttribute('name');                             
        alert(Value);
    }
}

【讨论】：

OP 想要表单控件，children 集合将获取所有元素子元素，并且未在所有正在使用的浏览器中实现。代码还有许多其他问题需要解决。

【解决方案2】：

任何正在寻找答案的人，我只是通过随机尝试重新排列我的代码来解决这个问题，但就是这样。

<!DOCTYPE html>
<html>
<head>
    <title>Foreach Tutorial</title>
    <script type="text/javascript">
        function Get() {
            var Form = document.getElementById('Form');
            for(I = 0; I < Form.length; I++) {
                var Name = Form[I].getAttribute('name');
                var Value = Form[I].value;
                alert(Name + ' : ' + Value);
            }
        }
    </script>
</head>
<body>
<form id="Form" onsubmit="return false;">
    <input type="text" name="User" placeholder="Username" />
    <input type="password" name="Pass" placeholder="Password" />
    <input type="submit" name="Submit" onclick="Get();" />
</form>
</body>
</html>

【讨论】：

如果您能够利用所提供的帮助并相应地编辑您的答案，那将会更加有用。

【解决方案3】：

这个问题可能更适合代码审查，但无论如何。

> function Get() {

按照惯例，以大写字母开头的变量名是为构造函数保留的。此外，名称应该表明函数的作用，通用的“get”函数并没有给出太多提示。更好的名称可能是 getFormValues。

>     var Form = document.getElementById('Form');

有一个 document.forms 集合可以用作调用方法的替代方法：

    var form = document.forms('Form');

>     for(I = 0; I < Form.length; I++) {

您应该始终在适当的范围内声明变量（注意 ECMAScript 只有全局、函数和 eval 范围，没有块范围），尤其是计数器。此外，表单的 length 属性是表单中控件的数量。由于它是实时集合，因此每次不需要时获取长度可能会影响性能，因此请缓存该值：

    for (var i = 0, iLen = form.length; i < iLen; i++) {

>         var Value = this.attribute('name').value;

this 的值由您调用函数的方式设置。如果函数由处理程序调用，则根据浏览器和方法附件，this 将引用其侦听器调用该函数的元素。在这种情况下，由于该函数是由内联侦听器调用的，因此 this 尚未设置，因此将默认为全局对象。

如果这样做，您可以轻松地从侦听器传递对元素的引用：

<input ... onclick="getFormValues(this);" ... >

现在您的函数将接收对元素的引用，并且可以方便地获取对表单的引用并遍历控件。最后，很少需要访问表单控件的属性值，您几乎总是希望访问属性。所以这里是重写的函数：

function getFormValues(element) {
    var form = element.form;
    var controls = form.controls;

    for (var i=0, iLen=controls.length; i<iLen; i++) {
        alert(controls[i].name + ': ' + controls[i].value);
    }
    // Prevent form submission
    return false;
}

最后，最好从表单而不是提交按钮调用侦听器，因为可以通过单击提交按钮以外的方式提交表单。哦，不要调用任何表单控件“提交”或使用任何与表单方法相同的名称，因为它会覆盖同名方法。由于大写，您在这里侥幸逃脱，但这并不是什么防御措施。

相关的 HTML 可以是（注意表单现在不需要名称或 id）：

<form onsubmit="return getFormValues();">
    <input type="text" name="userName" placeholder="Username">
    <input type="password" name="userPassword" placeholder="Password">
    <input type="submit" name="submitButton">
</form>

【讨论】：