當單個表單上存在多個提交按鈕時，請輸入關鍵操作

我遇到了一個奇怪的問題，Internet Explorer正在添加其他瀏覽器無法添加的其他查詢字符串參數。當單個表單上存在多個提交按鈕時，請輸入關鍵操作

該頁面具有自動提交功能和「重置過濾器」按鈕的窗體。當用戶點擊回車鍵時，它強制提交。當用戶點擊進入Internet Explorer時，出於某種原因選擇「重置篩選器」操作而不是提交按鈕。

例如，IE會將此到查詢字符串：

?search=this+is+text&op=Reset+Filters

在所有其他瀏覽器相同的查詢看起來是這樣的：

?search=this+is+text

當我檢查$_GET超全局在PHP中，我注意到op僅在我在IE和中運行應用程序時才被添加，只有當我按的形式輸入密鑰時纔會添加。

基於下面的HTML，點擊回車將有助於將op添加到查詢字符串，因爲提交按鈕和重置按鈕都包含在表單中。但爲什麼op只能添加到IE？

<form> 
... 
<div class="submit-button"> 
    <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">  
</div> 
<div class="reset-button"> 
    <input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">  
</div> 
... 
</form>

任何想法爲什麼會發生這種情況？

UPDATE：另一個可能很重要的信息。由於表單是自動提交的，第一個提交按鈕實際上是隱藏的。我想知道這是爲什麼IE瀏覽器使用第二個按鈕作爲提交處理程序。

來源

2017-09-01 Keven

在做了一些更多的研究後，我意識到我問了錯誤的問題。但是，它不會讓我刪除問題，所以我在這裏發佈我的實際問題的答案。

我的問題應該是「當一個表單中存在多個輸入時，瀏覽器如何確定在按下回車鍵時選擇了哪一個？」

答案是，當輸入鍵被擊中時，選擇type =「submit」的第一個輸入。但是，IE將跳過任何隱藏display:none的提交按鈕。

我找到了答案在這裏：

Multiple submit buttons on HTML form – designate one button as default

我定盤設置提交按鈕position: absolute; left: -1000%而非display:none。我在鏈接的答案上從@bobince那裏獲得瞭解決方案，但是，left:-100%沒有將它從頁面上完全推出，因此我將其更改爲left:-1000%。

來源

2017-09-05 15:59:34 Keven

恕我直言，它似乎是錯誤的使用提交按鈕傳達一些信息，而不是「嘿，我提交了一些數據」。如果用戶輸入提交表單，則某些瀏覽器發送與所有提交按鈕相關的所有數據是合理的。

如果你只是重新從表單的以前的部分輸入您可以使用：

<button type="reset">

如果你需要其他的輸入數據可能是一個複選框會更合適：

<form> 
... 
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters"> 
<label for="edit-reset">Reset Filters</label> 

<div class="submit-button"> 
    <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">  
</div> 
... 
</form>

如果您不需要其他輸入數據，則可以使用兩種形式：

<form> 
... 
<div class="submit-button"> 
    <input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">  
</div> 
</form> 

<form> 
<div class="reset-button"> 
    <input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">  
</div> 
</form>

來源

2017-09-01 17:05:21 Pocketsand

不幸的是，我對原始HTML控制不大。它是由框架生成的。我將不得不看看我是否可以破解它。 – Keven

提交對接上是輸入。它有一個名字和一個值。當你點擊其中一個提交按鈕時，它的值將被添加到提交的名稱中。當您按下回車鍵時，表格會自動提交，但由於您使用了兩個提交按鈕，它們都提供了一個參數。你有很多其他人已經建議的選項。您可以將類型更改爲「重置」或「按鈕」，但如果您需要在服務器上發佈這兩個操作，那麼您可以使用javascript攔截按鍵，然後單擊代碼中的按鈕。我可能會用按鈕類型來提交這樣的表單。

<input type="button" id="edit-reset" name="op" value="Reset Filters" 
class="form-submit" onclick="submitform()"> 

<Script> 
function submitform() 
{ 
document.getElementById("your-form-name-here").submit(); 
} 
</script>

來源

2017-09-01 17:44:05 biznetix

當單個表單上存在多個提交按鈕時，請輸入關鍵操作

回答

相關問題