你要寻找的基本事件是表单的
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
事件上,则必须使用事件监听器,这是完全不同的一回事,并且会引入自己的问题。
最终示例仅检查“我是男人”元素的值,因为(假设)您正在使用单选按钮,而且只有两个选项。如果未选中“我是男人”,则应选择另一个选项。但是,如果表单从无选项开始,则可能被视为错误。
最终示例还使用内联样式更改了正文的背景颜色。它让我很痛苦。更可接受的方法是根据需要添加/删除类,但再次,这有点超出了本问题的范围。