jQuery的論壇提交通過敲擊回車

我有一個不尋常的問題形式（這裏有一個簡化版本）：jQuery的論壇提交通過敲擊回車

<script> 
    (function($){ 
     $("form").submit(function(){ 
      alert('Checkout time!'); 
     }); 
     $("button[name='process_order']").click(function(){ 
      alert('Button Checkout time!'); 
     }); 
     $("button[name='back']").click(function(){ 
      alert('Back Button'); 
     }); 
    })(jQuery); 
</script> 

<form> 
    <input type="text" name="moo1" tabindex="1" /> 
    <input type="text" name="moo2" tabindex="2" /> 
    <button name="back" tabindex="4">Back</button> 
    <button name="process_order" tabindex="3">Process Order</button> 
</form>

按鈕做工精細，但是，如果我按下回車鍵時，文本框的一個有焦點，「後退按鈕」動作是什麼觸發...即使表單的提交處理程序設置做「結帳」 ...

來源

2012-04-13 Ian

如何避免由兩個按鈕推出的衝突，只是設置'back'行動起來作爲一個風格的鏈接？ – rjz 2012-04-13 02:17:39

表單中的按鈕默認爲提交按鈕。用一個類型按鈕替換它。 – RobG 2012-04-13 02:26:10

你也許可以改變process_order tothis：

<input type="submit" name="process_order" value="Process Order" tabindex="3" />

並更改爲：

<form id="myForm">

然後，綁定.submit（）處理它

$('#myForm').submit(function() 
{ 
    alert('Button checkout time!'); 
    return false; //we return false so that it doesn't refresh the page 
});

來源

2012-04-13 02:18:20 teh1

這解決了它......我仍然覺得這很奇怪，雖然這是發生...：S – Ian 2012-04-13 03:09:38

其他一些答案表明，原因是默認情況下是一個提交按鈕，並且更改類型是另一個解。然而，我提供的解決方案是_technically_應該如何完成的。它是最靈活的，並且會保持您的代碼可擴展性。 – teh1 2012-04-13 03:15:59

您的表單有兩個提交按鈕，表單將用回車鍵激活提交第一個提交按鈕。改變

<button name="back" tabindex="4">Back</button>

到

<button type="button" name="back" tabindex="4">Back</button>

避免瀏覽器解釋的第一個按鈕作爲一個提交按鈕

來源

2012-04-13 02:21:02 Umbrella

提交表單中[button元素]（http://www.w3.org/TR/html401/interact/forms.html#edef-BUTTON）的默認類型。 – RobG 2012-04-13 02:22:34

@RobG對，謝謝，修正。 – Umbrella 2012-04-13 02:29:57

jQuery的論壇提交通過敲擊回車

回答

相關問題