使用 addEventListener 将 JavaScript 添加到表单时出现问题
我有一个表单：
<form method="post" name="Form1" action="default.asp" onsubmit="return processField();">
<input type="hidden" name="hiddentext1">
<input type="text" name="text1">
<input type="submit" value="Submit" id="button1">
</form>
我想要的是在表单提交时调用
ProcessField
函数。我知道
ProcessField
函数运行良好 - 使用内联调用对其进行了测试。但现在我想通过 JavaScript 附加事件。以下是我的 JavaScript 代码：
<script type="text/javascript">
if (window.addEventListener){
window.addEventListener('load', attachFormSubmit, false);
} else if (window.attachEvent){
window.attachEvent('onload', attachFormSubmit );
}
function attachFormSubmit(){
theForm = document.getElementById("Form1");
alert("attaching form submit");
if (theForm.addEventListener){
theForm.addEventListener('submit', CleanUpEID, false);
} else if (theForm.attachEvent){
theForm.attachEvent('onsubmit', CleanUpEID);
}
}
function ProcessField()
{
alert("processing field");
if (this.text1.value == '')
{
alert ("Please enter the value")
this.text1.focus()
return false
}
this.hiddentext1.value = this.text1.value;
// Disable button
with ($('button1')) {
value = "Processing ...";
disabled = true;
}
return true;
}
</script>
我对上述脚本有两个问题：
-
它将事件多次附加到表单 - 每次页面重新加载时。我怀疑我的代码有更好的位置，但无法弄清楚。
-
processField函数中的关键字“this”未定义。如果我用表单名称替换“this”，效果会很好，但我想知道在这种情况下，需要做什么才能使关键字“this”起作用。
如果有人能给我指明正确的方向，我将不胜感激。 谢谢。
编辑
OP had a series of questions that involve some fundamental concepts of JavaScript. I have provided some links that will hopefully answer those questions. See the end of this post.
重写代码以证明它确实适用于
测试服务器
。如果语法错误，您将无法使其正常工作。最大的错误是您调用了
processField()
，但您定义了一个名为
ProcessField()
的函数，JavaScript 区分大小写。
为了达到您的目的，您当然必须更改表单的
action
。由于测试服务器的限制，我必须验证它的输入最少为 5 个、最多为 15 个字母数字，因此您可能也想更改它。
- it attaches the event to the form multiple times - every time page reloads. I suspect there is a better place for my code but cannot figure it out
您正在将 eventListener/Handler 添加/附加到窗口，这会使您的提交事件成为全局事件，而且您没有提供任何方法来阻止默认行为，因此任何默认由提交事件触发的表单和表单元素都会在事件链上弹出。我在表单上添加了 eventListener，然后使用
stopPropagation();
来防止在冒泡阶段发生任何意外触发。
- Keyword "this" in processField function comes up undefined. It works fine if I replace "this" with form name, but I was wondering what needs to be done in order for keywrod "this" to work in this case.
请参阅上面有关
processField
拼写错误的解释。*
顺便说一句，我没有费心添加跨浏览器的垃圾
attachEvent
，因为 IE8 已经死了，世界上 1% 的人可以使用 IE9
。如果您想要满足那 1% 的需求，只需像在代码中一样应用
attachEvent
即可。
http://glpjt.s3.amazonaws.com/so/34775593.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>34775593</title>
</head>
<body>
<form method="post" id="Form1" name="Form1" action="http://www.hashemian.com/tools/form-post-tester.php/so_post">
<input type="hidden" id="hiddentext1" name="hiddentext1">
<input type="text" name="text1" id="text1" placeholder="Submit 5 to 15 alphanumerics">
<input type="submit" value="Submit" id="button1">
</form>
<p>Once post is submited, server's response is returned with value of #hiddentext1 and #text1</p>
<div class="serverData">
<a href="http://www.hashemian.com/tools/form-post-tester.php/data.php/so_post">Server-side Results</a>
</div>
<script>
var form = document.getElementById('Form1');
var htxt = document.getElementById('hiddentext1');
var btn = document.getElementById('button1');
form.addEventListener('submit', processField, false);
function processField(e) {
var txt = document.getElementById('text1');
var str = txt.value;
var alnum = str.length;
alert("processing field");
if (alnum < 5 || alnum > 15) {
alert("Please enter a value of 5 to 15 alphanumeric values ");
txt.focus();
return false;
}
htxt.value = str;
// Disable button
this.setAttribute('disabled', true);
this.value = "Processing ...";
e.stopPropagation();
}
</script>
</body>
</html>