0

我必须防止在搜索表单上提交空搜索。表单没有提交按钮，所以我必须阻止输入。

html代码：

表格 1

 <form method="get" class="search-form" id="searchform" action="http://example.com" >   
                <input class="text" name="s" id="s" type="text" />       
    </form>

表格 2

<form action="http://example.com" class="search-form" method="get">             
    <input type="text" name="s" class="text">                           
</form>

Javascript 代码

// Im sure this funcions returns the 2 different forms, 
var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            searchForms[i].addEventListener("submit", function(e)
               {
                preventSubmit(e); // no problem here
                console.log(i) // ALWAYS LOGS 1         
               });
        } //I also implemented the ie code, but not necessary here, is the same as above for addEventListener
            
    }

每次我提交任何表单时，都会在控制台中写入 1，有什么想法吗？

4

3 回答 3

4

你需要一个闭包：

var searchForms = getElementsByClass('search-form');    
    for(i in searchForms)
    {   
        if (searchForms[i].addEventListener) 
        {
            (function(i) { // Closure start <-- We make our own static variable i 
                searchForms[i].addEventListener("submit", function(e)
                   {
                   preventSubmit(e); // no problem here
                   console.log(i)        
                   });
            })(i); // Closure end.
        }
    }

这是因为在您的循环之后 ( for i in searchForms)i将是最后一个值 (=== 1)。您将需要创建一个闭包以获得静态值i.

在此处查看更多关于闭包的信息：

JavaScript 闭包是如何工作的？

于 2012-07-06T18:06:23.557 回答
1

回调在提交之前不会执行——此时 的值为1。以立即执行函数i的形式的闭包允许我们捕获 的变化值并将其副本传递给我们的函数。i

还

1) 除非在某些情况下，一般要避免for-in对数组进行循环。使用传统for的循环。例如，如果您使用for-in通过 ECMA5querySelectorAll()方法选择表格的礼物，您会得到意想不到的结果（循环的四次迭代，而不是两次）

2）您不必要地重新评估循环的每次迭代使用哪种事件注册机制。决定一次，在外面。

//get forms
var searchForms = getElementsByClass('.search-form');

//initialise event registration depending on browser
var addEvent = window.addEventListener ? function(el, evt, func, bubble) {
    el.addEventListener(evt, func, bubble);
} : function(el, evt, func) {
    el.attachEvent('on'+evt, func);
};

//bind submit events
for (var i=0, len=searchForms.length; i<len; i++) {
    (function(i) {
        addEvent(searchForms[i], "submit", function(evt) { alert(i); preventSubmit(evt); }, false);
    })(i);
}
于 2012-07-06T18:32:08.270 回答
0

这是因为关闭而发生的，请参阅类似的链接

循环中的Jquery动态按钮对话框不填充功能

于 2012-07-06T18:08:21.573 回答