2

我只是在练习一些 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>
4

3 回答 3

6

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

> 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 范围，没有块范围），尤其是计数器。此外，表单的长度属性是表单中控件的数量。由于它是实时集合，因此每次不需要时获取长度可能会影响性能，因此请缓存该值：

    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>
于 2013-04-08T01:50:48.860 回答
3

您应该迭代表单的子项并使用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);
    }
}
于 2013-04-08T01:37:05.523 回答
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>
于 2013-04-08T01:39:40.553 回答