如何在没有服务器的情况下使用 HTML 表单

Question

我不是网络开发人员，想了解传递变量的更好方法。过去我使用过各种方法将东西传递给java脚本函数。我从未使用过表单，因为我总是将它们与服务器和数据库相关联。我有一个网站，用户的选择会更改网站的内容。

我想知道您是否可以在没有任何服务器的情况下使用表单，将一些内容传递给 javascript 函数，在该函数中它们用于更改页面内容。对于基本示例，如果有人选择男性，则页面背景变为蓝色，如果他们选择女性，则背景变为粉红色。表单是一种可行的方法，只需 onsubmit 调用 javascript 函数吗？我实际上如何将表单内容传递给 javascript 函数？

Answer 1

是的，您绝对可以使用表单/输入/任何类型的 html 元素，并且永远不会与服务器通信，只是不要期望存储该数据！您使用事件（如您提到的 onsubmit 事件）来触发 Javascript 函数是正确的。

这是一个快速而肮脏的例子（肮脏的重），它确实有点像你想要的那样。请注意，我不会在颜色更改之前等待表单提交，而是在他们从下拉列表中选择性别后立即执行此操作。

http://jsfiddle.net/wG8K4/1/

Answer 2

你不会传递参数。您可以让“onsubmit”调用 javascript 函数，然后在该函数中使用 javascript 访问用户已选择的实际控件。您可以使用 GetElementById 函数检索某个元素，然后确定该元素的值。

如果您只想更改背景颜色，则可以使用 javascript 更改 body 标记或页面上任何标记的 backgroundColor 属性。

不过，您必须记住从函数中返回 false - 否则，表单将被提交。

Answer 3

您不需要服务器/数据库来使用表单。表单只是一种将变量从一个文件传递到另一个文件的方法，无论该文件是 html 文件还是某些 php 脚本或其他文件。如果您坚持使用 GET 表单，您的表单自然会将其数据打包到页面的 URL 中，此时您可以访问它们。例如（借自 http://www.onlineaspect .com/2009/06/10/reading-get-variables-with-javascript/）：

<script language="javascript">
function $_GET(q,s) {
    s = s ? s : window.location.search;
    var re = new RegExp('&'+q+'(?:=([^&]*))?(?=&|$)','i');
    return (s=s.replace(/^?/,'&').match(re)) ? (typeof s[1] == 'undefined' ? '' : decodeURIComponent(s[1])) : undefined;
} 

var usersName = $_GET('username');
if(typeof(usersName)!='undefined'){
    document.write('<h1>Hi there, '+usersName+'</h1>');
}

</script>
<form>
     <input type="text" name="username" />
     <input type="submit" value="Say my name" />
</form>

Answer 4

您要查找的基本事件是表单的 submit 事件。如果您同意只使用事件处理程序，则可以执行以下操作：

var myForm = document.getElementById('myForm');
myForm.onsubmit = function () {
    // ...
};

因为您只是使用 JavaScript，所以您不希望实际提交表单。 （旁白：因为您使用的是 JS，所以您应该构建此表单并将其添加到页面与 JS，但这是一个完全不同的问题。）您可以像这样取消表单的默认操作：

myForm.onsubmit = function () {
    // ...
    return false;
};

在我们开始访问数据之前，请确保您已获取所需的元素。它使事情变得更快一些，因为您不必在每次提交表单时都从 DOM 中选择整个元素。例如：

var myForm = document.getElementById('myForm'),
    myTextField = document.getElementById('myTextField'),
    mySelectBox = document.getElementById('mySelectBox'),
    // ...

根据您拥有的表单元素类型，有不同的方法来访问其数据。文本输入、文本区域和选择框非常简单：

var textValue = myTextField.value,
    selectValue = mySelectBox.value;

单选按钮和复选框稍微复杂一些，因为您必须仔细检查每一个并查看哪些被选中以及哪些被选中不是/不是，就像这样：

var isOneChecked = checkboxOne.checked,
    isTwoChecked = checkboxTwo.checked;

以蓝色/粉色背景为例，您可能需要类似于这样的内容：

var myForm = document.getElementById('myForm'),
    maleBox = document.getElementById('maleBox');

myForm.onsubmit = function () {
    var isMale = maleBox.checked;
    if (isMale) {
        document.body.style.backgroundColor = 'manlyBlue';
    } else {
        document.body.style.backgroundColor = 'sexistPink';
    }
};

注释
如果您确实决定使用事件处理程序，请记住一次只能将一个事件处理程序应用于您的表单。如果您还想为 submit 事件附加不同的函数，则必须使用事件侦听器，这是一个完全不同的球类游戏，并引入了以下问题：它自己的。

最后一个示例仅检查“我是一个男人”元素的值，因为（大概）您正在使用单选按钮并且只有两个选项。如果“我是男人”没有被选中，那么另一个应该被选中。但是，如果表单一开始就没有选中任何选项，那么这可能会被视为错误。

最后一个示例还使用内联样式来更改正文的背景颜色。打字让我很痛苦。一种更容易忍受的方法是根据需要添加/删除类，但同样，这超出了这个问题的范围。

Answer 5

表单元素可以用作全局变量的形式 - 保存可由单个页面中的所有 javascript 使用和共享的状态。

然而，这可能会导致代码脆弱且难以理解。

我建议只要您处于单个页面的上下文中，就继续将参数传递给函数。

如果您需要将数据传递到另一个页面，那么表单可以让生活变得更轻松 - 使用 GET 表单，表单上的值将传递到表单 action 属性作为键值对。如果您使用 POST 方法，它们将在标头中传输。

Answer 6

如果您希望使用 Javascript 迭代表单元素，您可以使用 DOM 轻松完成此操作，因为表单将具有 length 属性，并且每个 input 将表示为索引这个类似数组的对象：

所以对于：

<form id="f" action="">
    Male<input type="radio" name="gender" value="male" />
    Female<input type="radio" name="gender" value="female" />
    <input type="submit" value="submit" />
</form>

你可以这样做：

var f = document.getElementById('f');

f.onsubmit = function (e) {
    e = e || window.event;
    var et = e.target || e.srcElement,
        gender;

    if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }

    for (var i = 0, il = et.length; i < il; i++) {
        if (et[i].name = 'gender' && et[i].checked) {
            gender = et[i].value;
        }
    }

    if (gender == 'male') {
        document.body.style.backgroundColor = 'cyan';
    } else if (gender) {
        document.body.style.backgroundColor = 'pink';
    }
};

参见示例→< /a>