Как я могу изменить форму, нажав «Сохранить», а затем отправить окончательный вариант формы?

Question

У меня есть форма с переменным количеством текстовых полей, и когда я нажимаю кнопку Сохранить (кнопка «Отправить»), я хочу удалить пустые и затем сохранить форму без пустых полей.

Но это только наполовину работа.Когда я нажимаю Сохранить, пустые поля визуально удаляются.Более того, обычно есть ошибка проверки, когда ящики оставлены пустыми, но с помощью removeEmptyBoxes () ошибки проверки нет, поэтому я знаю, что ящики каким-то образом удаляются перед отправкой.Но когда страница обновляется, снова появляются пустые поля.С другой стороны, если я разделю его на две кнопки и использую одну кнопку для удаления EmptyBoxes (), а затем нажму другую кнопку для сохранения, это нормально работает, а удаленные поля остаются удаленными.

Я уверен, что ямогу обойти это совершенно другим способом, но расстраивает, что это не работает так, как я хочу.Есть ли способ сделать это?

Моя форма сделана с использованием 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

Для формы с идентификатором myForm:

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

Answer 2

Учитывая эту простую форму:

<form id="theForm" method="post">
    <div class="box">
        <div class="box-content">
            Test
        </div>
    </div>
    <input name="xiSubmit" type="submit" value="Save" />
</form>

Вы можете добавить javascript следующим образом:

$(function() {
    $("#theForm").submit(function() {
        $('.box-content',$('div.box')).remove();
    });
});​

Приведенный выше обработчик отправки выполняется до фактической отправки формы, поэтому вы можете сделатьлюбая предварительная обработка, которую вы хотите.

Вот JSFiddle, с которым вы можете поиграть: http://jsfiddle.net/cTwMW/. Обратите внимание, что я добавил return false в конце скрипта javascript, чтобы форма не отправлялась (что позволяет увидеть jquery, удаливэлемент).