Question

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

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

Answer 1

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

> 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 将引用其侦听器调用该函数的元素。在这种情况下，因为函数是由内联侦听器调用的，所以此尚未设置，因此默认为全局对象。

如果您执行以下操作，则可以轻松地从侦听器传递对该元素的引用：

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

Answer 2

您应该迭代以形成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);
    }
}

Answer 3

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

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

Javascript foreach以名称和值的形式输入

3 个答案: