个人中心
gpt4 book ai didi

Javascript foreach 输入形式的名称和值

转载 作者：太空宇宙 更新时间：2023-11-04 13:42:52 26 4
gpt4 key购买 nike

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

最佳答案

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

> function Get() {

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

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

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

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

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

您应该始终在适当的范围内声明变量(注意 ECMAScript 只有全局、函数和评估范围，没有 block 范围)，尤其是计数器。此外，表单的 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>

关于Javascript foreach 输入形式的名称和值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15869897/

26 4 0
文章推荐： javascript - 如何判断一个元素是否是 JavaScript 中另一个元素的子元素(不是 jQuery)？
文章推荐： java - Spring如何处理文件保存
文章推荐： java - 如何将html字符串传递给另一个 Activity webView
文章推荐： java - 套接字仅在防火墙关闭时工作
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com