我不是网络开发人员，我想了解传递变量的更好方法。过去，我使用各种方法将事物传递给 java 脚本函数。我从来没有使用过表单，因为我总是将它们与服务器和数据库相关联。我有一个网站，其中用户的选择会改变网站的内容。
我想知道您是否可以在没有任何服务器的情况下使用表单，作为将一些东西传递给用于更改页面内容的 javascript 函数的一种方式。例如，如果有人选择男性，则页面背景变为蓝色，如果他们选择女性，则背景变为粉红色。表单会是要走的路，只需 onsubmit 调用一个javascript函数吗？我如何将表单内容实际传递给 javascript 函数？
【问题讨论】：
标签： javascript html forms parameter-passing
表单元素可以用作全局变量的一种形式 - 保持可以由单个页面中的所有 javascript 使用和共享的状态。
但是，这可能会导致代码脆弱且难以理解。
我建议保留将参数传递给函数，只要您处于单个页面的上下文中。
如果您需要将数据传递到另一个页面，那么表单可以让生活更轻松 - 使用GET 表单，表单上的值将作为键值传递到表单action 属性中引用的页面对。如果您使用POST 方法，它们将在标头中传输。
【讨论】：
您不需要服务器/数据库来使用表单。表单只是一种将变量从一个文件传递到另一个文件的方法，无论它是一个 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>
【讨论】：
是的，您绝对可以使用表单/输入/任何类型的 html 元素，而无需与服务器通信，只是不要期望存储这些数据！使用事件（例如您提到的 onsubmit 事件）来触发 Javascript 函数是正确的。
这是一个快速而肮脏的例子（很脏），它有点像你想要的。请注意，我不是在颜色更改之前等待表单提交，而是在他们从下拉列表中选择性别后立即进行。
【讨论】：
你不会传递参数。您可以让“onsubmit”调用一个 javascript 函数，然后在该函数中使用 javascript 访问用户选择的实际控件。您可以使用 GetElementById 函数来检索某个元素，然后确定该元素的值。
如果您只想更改背景颜色，您可以使用 javascript 更改 body 标签或页面上任何标签的 backgroundColor 属性。
不过，您必须记住从您的函数中返回 false ——否则，表单将被提交。
【讨论】：
您要查找的基本事件是表单的submit 事件。如果您可以只使用事件处理程序，则可以执行以下操作：
var myForm = document.getElementById('myForm');
myForm.onsubmit = function () {
// ...
};
因为您只是使用 JavaScript，所以您不希望表单实际提交。 （旁白：因为您使用的是 JS，所以您应该只构建此表单并将其添加到页面 with 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 事件附加不同的功能，则必须使用事件 listeners，这是一个完全不同的球类游戏，并且会引入自己的问题。
最后一个示例只检查“I'm a guy”元素的值，因为（可能）您正在使用单选按钮并且只有两个选项。如果“我是一个男人”没有被选中，那么另一个应该是。但是如果表单开始时 没有 选项被选中，那么这可能被认为是一个错误。
最后一个示例还使用内联样式来更改正文的背景颜色。打字让我很痛苦。一个更容易接受的方法是根据需要添加/删除类，但同样，这超出了这个问题的范围。
【讨论】：
如果您希望使用 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';
}
};
【讨论】：