當我在不同的文本輸入按下輸入時如何使表單提交不同的按鈕？

Question

例如，我有這樣的形式：

<form action="destination.jsp" method="POST"> 
    <input type="text" name="Productqty1"/> 
    <input type="text" name="Productqty2"/> 
    <input type="text" name="Productqty3"/> 
    <input type="submit" name="RecalculatePrice" value="Recalculate Price"/> 

    <input type="text" name="ZipCode"/> 
    <input type="submit" name="RecalculateShipping" value="Recalculate Shipping"/> 

    <input type="text" name="Offercode"/> 
    <input type="submit" name="RecalculateDisc" value="Recalculate Discount"/> 

    <input type="submit" name="CheckOut"/> 
</form> 

我需要，如果用戶按下Productqty1，Productqty2，或Productqty3進入，那麼默認的動作被抑制，按鈕RecalculatePrice點擊來代替。

如果用戶按下ZipCode上的回車鍵，RecalculateShipping按鈕被點擊取而代之，情況也是如此。與Offercode輸入和RecalculateOffercode按鈕相同。

但是，如果用戶按下CheckOut按鈕，則整個表單仍必須提交。這就是爲什麼他們在同一個表單上，多個提交按鈕在同一個表單上。

我還需要禁止輸入鍵的默認操作，因爲IE8並沒有發送按鈕提交值以及表單提交，所以讓我們完全禁用它以避免混淆。

我該如何找到一個統一的解決方案？只要我能理解解決方案模式，就可以使用多個javascript函數，因爲使用多個提交按鈕的表單和用戶可以在任何輸入字段上按回車讓我感到困惑。歡迎使用JQuery解決方案。謝謝。

編輯：抱歉導致混亂的單詞的可憐的選擇。壓制默認行爲的意思是，當你按下回車鍵，表單被提交，使用任何（隨機？）按鈕提交。這是我想壓制的默認行爲。

Answer 1

我已經爲每個提交按鈕（添加ID）和文本框（添加的類）添加類和ID。

試試這個

<form action="destination.jsp" method="POST"> 
    <input type="text" name="Productqty1" class="class1"/> 
    <input type="text" name="Productqty2" class="class1"/> 
    <input type="text" name="Productqty3" class="class1"/> 
    <input type="submit" name="RecalculatePrice" value="Recalculate Price" id="class1"/> 
    <input type="text" name="ZipCode" class="class2"/> 
    <input type="submit" name="RecalculateShipping" value="Recalculate Shipping" id="class2"/> 
    <br><br> 
    <input type="text" name="Offercode" class="class3"/> 
    <input type="submit" name="RecalculateDisc" value="Recalculate Discount" id="class3"/> 

    <input type="submit" name="CheckOut"/> 

</form> 

腳本

$(document).ready(function() { 
    $(".class1").keypress(function (event) { 
     if (event.which == 13) { 
      event.preventDefault(); 
      $('#class1').click(); 
     } 
    }); 
    $(".class2").keypress(function (event) { 
     if (event.which == 13) { 
      event.preventDefault(); 
      $('#class2').click(); 
     } 
    }); 
    $(".class3").keypress(function (event) { 
     if (event.which == 13) { 
      event.preventDefault(); 
      $('#class3').click(); 
     } 
    }); 
}); 

小提琴Demo

Answer 2

我認爲CheckOut是您的特殊場景。雖然你當然可以趕上ENTER鍵，調用不同的動作，主要存在兩個原因，我不覺得這是這裏的最佳解決方案：

1. 你IE8的擔心似乎否定了整個前討論，在我看來，這應該建議你看另一個方向。不要爲IE8做一個特殊的解決方案，做所有支持的瀏覽器都能理解的東西。
2. 沒有字段，其中CheckOut應該是輸入時的默認操作。

我建議你做不同的形式，和使用不同的動作，而不是檢查哪個按鈕被點擊通過檢查按鈕的名稱參數。

點擊CheckOut按鈕，該按鈕永遠不會被回車鍵觸發，您應該提交所有表單。可以序列的組合值並將其張貼，像這樣：

$('#product-form, #zip-form, #offer-form').serialize(); 

Answer 3

您可以使用jQuery/javascript函數提交頁面之前更換form.action。 提交類型應將表單提交給默認表單操作，該表單已添加到表單聲明中。

<form action="destination.jsp" method="POST"> 
    <input type="text" name="Productqty1"/> 
    <input type="text" name="Productqty2"/> 
    <input type="text" name="Productqty3"/> 
    <input type="button" name="RecalculatePrice" value="Recalculate Price"/ onClick="callDefault();"> 

    <input type="text" name="ZipCode"/> 
    <input type="button" name="RecalculateShipping" value="Recalculate Shipping"/ onClick="callRecalculateShipping();"> 

    <input type="text" name="Offercode"/> 
    <input type="button" name="RecalculateDisc" value="Recalculate Discount"/ onClick="callRecalculateDisc();"> 

    <input type="button" name="CheckOut"/ onClick="callCheckout();"> 
</form> 
<javascript> 
function callCheckout(){ 
form.action="<some value>"; 
form.submit(); 
} 
...so on with other functions... 
</javascript> 

將輸入類型更改爲按鈕。

Answer 4

我覺得這種方法很容易處理進入關鍵的問題：d

var clickedByButton = false; 
 
function check(val){ 
 
\t if(clickedByButton){return true;} //check for button click 
 
\t return false; 
 
} 
 
function clicker(val){ 
 
\t clickedByButton = true; 
 
\t switch(val.value){ 
 
\t \t case "Recalculate Price" : console.log('1');/*things to do on 1st button*/ break; 
 
\t \t case "Recalculate Shipping" : console.log('2');/*things to do on 2nd button*/ break; 
 
\t \t case "Recalculate Discount" : console.log('3');/*things to do on 3rd button*/ break; 
 
\t \t case "CheckOut" : /*things to do on 4th button*/ break; 
 
\t } 
 
}

<form action="destination.jsp" onsubmit="return check(this);" method="POST"> 
 
    <input type="text" name="Productqty1" class="class1"/> 
 
    <input type="text" name="Productqty2" class="class1"/> 
 
    <input type="text" name="Productqty3" class="class1"/> 
 
    <input type="submit" name="RecalculatePrice" value="Recalculate Price" onclick="clicker(this);" id="class1"/> 
 
    <input type="text" name="ZipCode" class="class2"/> 
 
    <input type="submit" name="RecalculateShipping" onclick="clicker(this);" value="Recalculate Shipping" id="class2"/> 
 
    <br><br> 
 
    <input type="text" name="Offercode" class="class3"/> 
 
    <input type="submit" name="RecalculateDisc" onclick="clicker(this);" value="Recalculate Discount" id="class3"/> 
 

 
    <input type="submit" onclick="clicker(tihs);" name="CheckOut"/> 
 

 
</form>