修改

Question

我有一张表格：

 <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>

我对上述脚本有两个问题：

它会多次将事件附加到表单 - 每次页面重新加载。我怀疑我的代码有一个更好的地方，但无法弄明白。
关键字＆＃34;此＆＃34; in processField函数未定义。如果我更换＆＃34;这＆＃34;它可以正常工作使用表单名称，但我想知道为了关键字＆＃34;这个＆＃34;需要做什么？在这种情况下工作。

如果有人能指出我正确的方向，我真的很感激。感谢。

Answer 1

修改

OP有一系列涉及JavaScript基本概念的问题。我提供了一些有希望回答这些问题的链接。请参阅本文末尾。

重写代码以证明它实际上适用于test server。由于语法错误，您永远无法使用它。最大的错误是你调用processField()，但你定义了一个名为ProcessField()的函数，JavaScript区分大小写。

为了达到您的目的，您当然必须更改表单action。由于测试服务器的限制，我必须验证它的输入最少5分钟和最多15个字母数字，所以你也想要改变它。

1）它会多次将事件附加到表单 - 每次页面重新加载。我怀疑我的代码有一个更好的地方，但无法弄明白

您正在将eventListener / Handler添加/附加到窗口，这使您的提交事件成为全局，而且您没有提供任何方法来防止默认行为，因此默认情况下由任何形式和表单元素触发提交事件将在事件链上弹出。我将eventListener添加到表单中，然后使用stopPropagation();来防止在冒泡阶段发生任何意外触发。

2）关键字＆＃34;这个＆＃34; in processField函数未定义。如果我更换＆＃34;这＆＃34;它可以正常工作使用表单名称，但我想知道需要做什么才能获得keywrod＆＃34;这个＆＃34;在这种情况下工作。

请参阅上面有关processField。*

错字的解释是的，我没有打扰添加跨浏览器的垃圾attachEvent because IE8 is dead, and that 1% of the world can use 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>

参考

使用addEventListener向表单添加javascript的问题

1 个答案:

修改

参考