通過刪除隱藏的div執行乾淨的提交

Question

我正在嘗試執行'clean'提交，即從表單字段中刪除所有隱藏的div後調用的提交。

由於這是一個特點，我要更頻繁地使用，我調整了我的代碼到擴展部分：

$.fn.extend({ 
    bindCleanSubmit: function() { 
    $(this).submit(function(event) { 
     event.preventDefault(); 
     $(this).find("div:hidden").remove(); 
     console.log("trying to commit..."); 

     return true; 
    }); 
    } 
}); 

現在，所有的div被刪除時，將觸發控制檯事件，但在最後提交沒有執行。

你現在問題在這裏？

Answer 1

我不確定你想用preventDefault()做什麼，但是如果你從bindCleanSubmit()中刪除它，隱藏的div將從表格中刪除，並且它將被正常提交。因此，考慮下面的HTML：

<form id="myform" method="POST" action="/"> 
    <input type="text" name="displayedInput" value="1"/> 
    <div style="display: none"> 
     <input type="text" name="hiddenInput" value="1"/> 
    </div> 
    <button type="submit">Submit</button> 
</form> 

...和更新的插件：

$.fn.extend({ 
    bindCleanSubmit: function() { 
    $(this).submit(function(event) { 
     $(this).find("div:hidden").remove(); 
     console.log("trying to commit..."); 
     return true; 
    }); 
    } 
}); 

$('#myform').bindCleanSubmit(); 

...當myform提交只有displayedInput值將被提交到服務器。