提交失敗輸入從表單中刪除（在Firefox中）

編輯：我簡化了示例使用文本輸入。同樣的錯誤。從表單中刪除輸入時，表單無法提交。編輯：在Firefox 14中複製。Chrome沒有相同的行爲。提交失敗輸入從表單中刪除（在Firefox中）

我有一個多文件上傳的形式與jQuery的添加和從表單中刪除文件輸入元素。如果我刪除其中一個輸入，則form.submit（）函數不會繼續。以下是使用「文本」輸入的簡化代碼。而在http://jsfiddle.net/carbontax/rMMuE/

<form id="form-foo" method="POST"> 
     <div id="input-container-container"> 
     </div> 
    </form> 
    <input type="button" id="add-text-input" value="ADD TEXT INPUT"> 
    <input type="button" id="submit" value="SUBMIT">

腳本小提琴

$('#submit').click(function() { 
     $('#form-foo').submit(); 
    }); 

    $("#add-text-input").click(function() { 
     var div = $('<div/>', { 
      'class': 'input-container' 
     }).append($('<button/>', { 
      'class': 'delete-text-input', 
      html: "X" 
     })); 
     var input = $('<input/>', { 
      type: 'text', 
      name: 'texts', 
      'class': 'input-text' 
     }).appendTo(div); 
     div.appendTo($('#input-container-container')); 
    }); 

    $('#form-foo').on('click', 'button.delete-text-input', function(e) { 
     e.preventDefault(); 
     $(this).closest('div').remove(); 
    });

來源

2012-07-20 carbontax

您是否檢查JS錯誤？如果您要從表單中刪除元素，但不刪除任何專門處理這些元素的JS代碼，則最終可能會出現一堆錯誤。 – 2012-07-20 16:03:21

沒有錯誤。根據jquery文檔。 $ .remove（）從DOM中刪除所有處理程序以及HTML。 – carbontax 2012-07-20 16:17:01

Satya Teja提供了一個有用的建議，將提交按鈕放在表單中，但我不知道它爲什麼起作用。在我的情況下，我需要根據另一個事件的結果間接提交表單。所以這裏是解決方案。

HTML：形式

<form id="form-foo" method="POST"> 
     <div id="input-container-container"> 
     </div> 
     <!-- workaround to allow submit after deleting a form element --> 
     <input type="submit" id="form-foo-submit" style="display: none"/> 
    </form> 
    <input type="button" id="add-text-input" value="ADD TEXT INPUT"> 
    <input type="button" id="submit" value="SUBMIT">

腳本中添加一個隱藏的提交按鈕。不要在窗體上調用submit（），而要在隱藏的提交按鈕上調用click（）。適用於Firefox，Chrome甚至IE6

$('#submit').click(function() { 
     // Instead of calling $('#form-foo').submit() 
     $('#form-foo-submit').click(); 
    }); 

    $("#add-text-input").click(function() { 
     var div = $('<div/>', { 
      'class': 'input-container' 
     }).append($('<button/>', { 
      'class': 'delete-text-input', 
      html: "X" 
     })); 
     var input = $('<input/>', { 
      type: 'text', 
      name: 'texts', 
      'class': 'input-text' 
     }).appendTo(div); 
     div.appendTo($('#input-container-container')); 
    }); 

    $('#form-foo').on('click', 'button.delete-text-input', function(e) { 
     e.preventDefault(); 
     $(this).closest('div').remove(); 
    });

來源

2012-07-20 17:37:25 carbontax

保持形式不在外面內提交..

<form id="form-foo" method="POST"> 
     <div id="input-container-container"> 
     </div> 

    <input type="button" id="submit" value="SUBMIT"> 
    </form>

提交

來源

2012-07-20 16:08:38

這不適合。我簡化了我的例子。提交在表單上從外部調用。 – carbontax 2012-07-20 16:59:41

+1這是一個有用的建議，即使我不能按原樣使用它，因爲我需要從窗體外部調用submit（）。我仍然想知道爲什麼submit（）函數在輸入被移除時停止工作。 – carbontax 2012-07-20 17:30:27

由於您的輸入是對的外形式，他們都沒有提交。確保您要發送的所有數據都是之間的表單標籤。

來源

2012-07-20 16:11:31 TurdPile

+1的答案和名稱。 TurdPile - 經典。 – iambriansreed 2012-07-20 16:15:11

不正確，TurdPile。輸入被添加到表單中。注意這一行：div.appendTo（$（'＃input-container-container'））;但這是一個有趣的名字。 – carbontax 2012-07-20 16:19:04

提交失敗輸入從表單中刪除（在Firefox中）

回答

相關問題