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

Question

我不是一个web开发人员，并且想要了解更好的方式来传递变量。在过去，我使用各种方式将事情传递给Java脚本函数。我从来没有使用表单，因为我总是将它们与服务器和数据库关联起来我有一个网站，其中用户选择更改网站的内容。

我想知道如果你可以使用没有任何服务器的表单，只是为了将一些东西传递给一个JavaScript函数，用来更改页面内容。对于基本的例子，如果有人选择男性的页面背景变成蓝色，如果他们选择女性背景变成粉红色。表单将成为去的方式，只是onsubmit调用一个JavaScript函数？我怎样才能将表单内容传递给javascript函数？

Answer 1

是的，你绝对可以用表格/输入/任何HTML元素的，从来没有跟一个服务器，就不要指望来存储数据！你是正确的使用事件（比如你提到的onsubmit）来触发Javascript函数。

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

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

Answer 2

表单元素可以用作全局变量的一种形式 - 持有可以在单个页面中使用并由所有javascript共享的状态。

但是，这可能导致代码变得脆弱而难以理解。

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

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

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

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

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

虽然您必须记得从函数返回false，否则表单将被提交。

Answer 5

你可以在html中包含各种表单域，甚至不需要表单标签。如果你照顾的唯一的ID，你可以阅读他们的价值观很简单：

I am <br /> 
<input type="checkbox" id = "male"> male <br /> 
<input type="checkbox" id = "female"> female 

现在你可以在JavaScript中使用这样的：

var isMale = document.getElementById('male').checked, 
    isFemale = document.getElementById('female').checked,; 
if (isMale){ 
    /*do you thing*/ 
} else if (isFemale) { 
    /*do other things*/ 
} 

这不是最好的例子，但它给你的想法，我希望。

Answer 6

您要寻找的基本事件是表单的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 7

如果你的愿望是通过使用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 →