Question

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

我想知道你是否可以使用没有任何服务器的表单，只是将一些东西传递给javascript函数，用于更改页面内容。对于基本示例，如果有人选择男性页面背景变为蓝色，如果他们选择女性，则背景变为粉红色。表单是否可以去，只需提交调用javascript函数？我如何将表单内容实际传递给javascript函数？

Answer 1

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

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

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

Answer 2

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

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

你必须记住从你的功能中返回错误 - 否则，表格将被提交。

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';
    }
};

See example →

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

6 个答案: