2010-10-01 109 views
4

我已經寫了一個表單提交的事件監聽器,這引起了我幾個問題。當在文本框內按下'enter'時,一切正常。但是,我有一個跨度(帶背景圖像),通過點擊事件提交表單。這工作不正常,我不明白爲什麼。提交表單的事件監聽器

這裏是基本的HTML:

<form name="myForm"> 
    <input type="text" name="search" /> 
    <span id="search-button"></span> 
</form> 

這裏是JS的事件偵聽器:

function evtSubmit(e) { 
    // code 
    e.preventDefault(); 
}; 

var myform = document.myForm; 
if (myform.addEventListener) { 
    myform.addEventListener('submit', evtSubmit, false); 
} 

而這裏的JS的 '跨度' 和它的Click事件:

var searchButton = document.getElementById('search-button'); 
if (searchButton) { 
searchButton.onclick = function() { 
    document.myForm.submit(); 
}; 
} 

注意:跨度單擊事件的JS位於單獨的JS文件中,並且不可訪問atm,因此更改該腳本爲le ss選項。如果解決這個問題的唯一方法是更新該文件,我可以......但由於流程超出了我的控制範圍,因此要困難得多。

+1

其實,這是一個很好的問題,可能會得到更多的意見,如果它的標題是「重寫內置的Javascript在窗體上提交法」 – 2010-10-01 17:25:49

回答

5

當致電form.submit()時,onsubmit事件不會被觸發。作爲替代方案,可以將action屬性設置爲javascript:evtSubmit(event)

function evtSubmit(e) { 
    // code 
    e.preventDefault(); 
}; 

var myform = document.myForm; 
myform.setAttribute('action', 'javascript:evtSubmit();'); 
+0

疑難雜症。會重寫原型對象上的「提交」事件來解決問題嗎? – CoryDorning 2010-10-01 17:03:03

+0

男人,你救了我的一天! :) – BananaDeveloper 2016-11-20 15:46:28