Mou*_*jli 2 html javascript forms foreach
我只是练习一些javascript而且我以前经常使用JQuery!我没有使用原始javascript的主要经验,我想像我做JQuery一样学习它.我有一个简单的表单和一个javascript函数来提交它onsubmit和我想获得表单中的每个输入的名称和值与我的功能,但它似乎没有工作可以有人帮助我吗？
<!DOCTYPE html>
<html>
<head>
<title>Foreach Practice</title>
<script type="text/javascript">
function Get() {
var Form = document.getElementById('Form');
for(I = 0; I < Form.length; I++) {
var Value = this.attribute('name').value;
alert(Value);
}
}
</script>
</head>
<body>
<form id="Form" onsubmit="return false;">
<input type="text" name="User" placeholder="Username" />
<input type="password" name="User" placeholder="Password" />
<input type="submit" name="Submit" onclick="javascript:Get();" />
</form>
</body>
</html>
这个问题可能更适合代码审查,但无论如何.
> function Get() {
按惯例,以大写字母开头的变量名称保留给构造函数.此外,名称应指明函数的功能,通用的"get"函数不会给出很多提示.更好的名称可能是getFormValues.
> var Form = document.getElementById('Form');
有一个document.forms集合可用作调用方法的替代方法:
var form = document.forms('Form');
> for(I = 0; I < Form.length; I++) {
您应该始终在适当的范围内声明变量(注意ECMAScript只有全局,函数和eval范围,没有块范围),尤其是计数器.此外,表单的长度属性是表单中控件的数量.由于它是一个实时集合,每次不需要时获取长度可能会影响性能,因此缓存该值:
for (var i = 0, iLen = form.length; i < iLen; i++) {
> var Value = this.attribute('name').value;
值这是你如何调用一个函数来设置.如果函数由处理程序调用,那么根据浏览器和方法附件,这将引用其侦听器调用该函数的元素.在这种情况下,因为该功能是通过内嵌侦听器调用,这还没有被设置成默认为全局对象.
如果您执行以下操作,则可以轻松地从侦听器传递对该元素的引用:
<input ... onclick="getFormValues(this);" ... >
现在,您的函数将接收对元素的引用,并可以方便地获取对表单的引用并迭代控件.最后,很少需要访问表单控件的属性值,您几乎总是想要访问属性.所以这是重写函数:
function getFormValues(element) {
var form = element.form;
var controls = form.controls;
for (var i=0, iLen=controls.length; i<iLen; i++) {
alert(controls[i].name + ': ' + controls[i].value);
}
// Prevent form submission
return false;
}
最后,您最好从表单而不是提交按钮调用侦听器,因为表单可以通过单击提交按钮以外的方式提交.哦,不要调用任何表单控件"提交"或使用任何与表单方法相同的名称,因为它将覆盖同名方法.由于资本化,你在这里侥幸逃脱,但这并不是很多防守.
相关的HTML可以是(请注意,表单现在不需要名称或ID):
<form onsubmit="return getFormValues();">
<input type="text" name="userName" placeholder="Username">
<input type="password" name="userPassword" placeholder="Password">
<input type="submit" name="submitButton">
</form>