2016-07-24 34 views
0

我正在編寫一個JavaScript函數來預處理表單數據。我需要知道的一件事是使用了多個提交按鈕中的哪一個。JavaScript和HTML表單:提交者是哪個按鈕?

粗略地說,腳本具有以下大綱。

var form=document.querySelector('form#test'); 
form.onsubmit=processForm; 
function processForm() { 
    // how did I get here 
} 

<form id="test"> 
    <!-- usual stuff --> 
    <button type="submit" name="check">Check</button> 
    <button type="submit" name="doit">Do Stuff</button> 
</form> 

我知道我可以附加功能,個人提交按鈕,但如果我重視它的形式本身會更有彈性。

是否有表單屬性或其他方法來檢查使用哪個提交按鈕?

感謝

+0

* 「這將是更具彈性」 *如何? – 4castle

+1

@ 4castle爲什麼它不可靠?我有多個按鈕,都需要預處理。原則上,我也可以發送一個'submit()'調用,它可以繞過按鈕,因此也可以發出'onclick'聲音。 – Manngo

+0

@StephenRoss從未如此。 '''在功能上等同於'''。 – Manngo

回答

1

您可以將click處理每個<button>元素,創建一個變量來存儲點擊buttonname財產,或參考元素,訪問屬性或元素在submit事件

function processForm(e) { 
    e.preventDefault(); 
    console.log(curr) // `curr`: `name` of clicked `button"` element 
} 

var submit = document.querySelectorAll("button[type=submit]"); 
var curr; 
for (var i = 0; i < submit.length; i++) { 
    submit[i].onclick = function(e) { 
    curr = e.target.name; // store reference to `name`, or element 
    } 
} 
0

通常情況下,點擊提交按鈕被認爲是有效的。 我相信,當只有1個提交按鈕時,表單將在輸入時提交,但當多個提交按鈕時將只提交點擊。

因此,在您的後端,您可以檢查是否存在任一表單按鈕以知道使用了哪個按鈕。 HTML RFC的

相關章節: https://www.w3.org/TR/html401/interact/forms.html#h-17.13.2

但是我沒能找到這個讓你的里程可能會有所不同了良好的瀏覽器兼容性。

0

我相信我的問題的答案是,你不能。一旦激活了submit事件,它似乎並不知道或關心它是如何到達那裏的。

正如我原來的問題中提到的,唯一的解決方案是將偵聽器附加到提交按鈕[s]。

這裏的處理代碼存根:

window.onload=init; 

function init() { 

    var form=document.querySelector('form#test'); 
    var submitButtons=form.querySelectorAll('button:not([type]),button[type="submit"],input[type="submit"]'); 
    if(submitButtons.length) { 
     for(var i=0;i<submitButtons.length;i++) submitButtons[i].addEventListener('click',process); 
    } 
    function process(e) { 
     var submitter=this; 
     var form=this.form; 
     // etc 
    } 
} 

哦...

相關問題