javascript - 如何在单击 "Save"时更改表单，然后提交表单的最终版本？

Question

我有一个带有可变数量文本框的表单，当我单击“保存”(提交按钮)时，我希望它删除空文本框，然后保存没有空框的表单。

但它只发挥了一半作用。当我单击“保存”时，空框会在视觉上被删除。此外，当框留空时，通常会出现验证错误，但使用removeEmptyBoxes()时，不会出现验证错误，所以我知道框在提交之前以某种方式成功删除。但是当页面刷新时，空框再次出现。另一方面，如果我将其分成两个按钮并使用一个按钮来removeEmptyBoxes()，然后单击另一个按钮来保存，那么效果很好，并且删除的框保持删除状态。

我确信我可以用完全不同的方式解决这个问题，但令人沮丧的是它没有按照我想要的方式工作。有什么办法可以做到这一点吗？

我的表单是使用 Ajax.BeginForm 制作的。我的按钮如下所示:

<input name="xiSubmit" type="submit" value="Save" onclick="removeEmptyBoxes()" />

function removeEmptyBoxes() {
  $('div.box').each(function () {
    var content = $(this).find('.box-content').val();

    if (content == '') {
      removeElement(this);
    }
  });
  return true;
}

<小时/>

解决方案:我的removeElement() 函数由一个slideUp 组成，可以很好地隐藏该框，然后完全删除该框。我删除了 SlideUp 位，一切正常。不知道为什么它不能与 SlideUp 一起使用。

Answer 1

对于 ID 为 myForm 的表单:

$('#myForm').submit(function(ev){
    ev.preventDefault();  // prevent the original form submit
    // do your thang
    $(this).submit();  // submit form with your changes
});