logo标签列表

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

javascripthtmlformsparameter-passing
6

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

我想知道是否可以仅使用表单作为一种方式，将一些内容传递给JavaScript函数，在那里它们被用于更改页面内容，而无需任何服务器。例如，如果有人选择男性，则页面背景变为蓝色，如果他们选择女性，则背景变为粉色。表单是否是正确的方法，只需在onsubmit时调用JavaScript函数即可？我该如何将表单内容传递给JavaScript函数？

6个回答
7

是的，您完全可以使用表单/输入/任何类型的html元素而不与服务器通信，只是不要期望存储那些数据！ 您在使用事件（如您提到的onsubmit）来触发JavaScript函数方面是正确的。

这里有一个快速而肮脏的例子，有点类似于您想要的。 请注意，我不会等到提交表单后再进行颜色更改，而是在他们从下拉列表中选择性别后立即进行更改。

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

3
您没有传递参数。您可以让“onsubmit”调用JavaScript函数，然后在函数内部使用JavaScript访问用户选择的实际控件。您可以使用GetElementById函数检索某个元素，然后确定该元素的值。
如果你只想改变背景颜色，你可以使用JavaScript来改变页面上任何标签或body标签的backgroundColor属性。
但是，您必须记得从函数中返回false，否则表单将被提交。
1

您不需要服务器/数据库来使用表单。表单只是一种从一个文件传递变量到另一个文件的方法，无论它是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>
1
你要寻找的基本事件是表单的 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事件上，则必须使用事件监听器，这是完全不同的一回事，并且会引入自己的问题。

最终示例仅检查“我是男人”元素的值，因为（假设）您正在使用单选按钮，而且只有两个选项。如果未选中“我是男人”，则应选择另一个选项。但是，如果表单从无选项开始，则可能被视为错误。

最终示例还使用内联样式更改了正文的背景颜色。它让我很痛苦。更可接受的方法是根据需要添加/删除类，但再次，这有点超出了本问题的范围。

0
如果您希望使用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';
    }
};

查看示例 →

0

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

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

我建议保持传递参数给函数，只要您在单个页面的上下文中。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接