Удалите пустые значения из параметров формы перед отправкой

Question

У меня есть некоторый javascript, который ловит изменения в форме, а затем вызывает функцию регулярной отправки формы. Форма является GET-формой (для поиска), и у меня есть много пустых атрибутов в параметрах. Что я хотел бы сделать, это удалить все пустые атрибуты перед отправкой, чтобы получить более чистый URL-адрес: например, если кто-то меняет «subject», выберите «english», я хочу, чтобы его URL поиска был

http://localhost:3000/quizzes?subject=English

вместо

http://localhost:3000/quizzes?term=&subject=English&topic=&age_group_id=&difficulty_id=&made_by=&order=&style=

как сейчас. Это просто для того, чтобы иметь более чистую и более значимую ссылку для ссылки на закладки для людей и т. Д. Итак, мне нужно что-то в этом роде, но это не правильно, так как я не редактирую реальную форму но объект js сделан из параметров формы:

  quizSearchForm = jQuery("#searchForm");
  formParams = quizSearchForm.serializeArray();
  //remove any empty fields from the form params before submitting, for a cleaner url
  //this won't work as we're not changing the form, just an object made from it.
  for (i in formParams) {
    if (formParams[i] === null || formParams[i] === "") {
      delete formParams[i];
    }
  }
  //submit the form

Я думаю, что я близок к этому, но мне не хватает шага, как редактировать атрибуты фактической формы, а не создавать другой объект и редактировать это.

благодарен за любые советы - макс.

РЕДАКТИРОВАТЬ - РЕШЕНО - спасибо многим, кто написал об этом. Вот что у меня есть, и кажется, что оно отлично работает.

function submitSearchForm(){
  quizSearchForm = jQuery("#searchForm");
  //disable empty fields so they don't clutter up the url
  quizSearchForm.find(':input[value=""]').attr('disabled', true);
  quizSearchForm.submit();
}

Answer 1

Входные данные с атрибутом disabled, установленным на true, не будут отправлены с формой. Итак, в одной строке jQuery:

$(':input[value=""]').attr('disabled', true);

Answer 2

$('form#searchForm').submit(function() {
    $(':input', this).each(function() {
        this.disabled = !($(this).val());
    });
});

Answer 3

Вы не можете сделать это таким образом, если вы вызываете метод submit формы; который отправит всю форму, а не массив, созданный для вас jQuery.

Что вы можете сделать, это отключить поля формы, которые являются пустыми до отправки формы; отключенные поля опускаются при отправке формы. Итак, пройдитесь по элементам формы и для каждого пустого, отключите его, а затем вызовите метод submit в форме. .

Answer 4

Ну, одну вещь, которую вы могли бы сделать, это отключить пустые входы перед вызовом "serializeArray"

$('#searchForm').find('input, textarea, select').each(function(_, inp) {
  if ($(inp).val() === '' || $(inp).val() === null)
    inp.disabled = true;
  }
});

Подпрограмма serializeArray () не будет включать их в свои результаты. Теперь вам, возможно, придется вернуться и снова включить их, если публикация формы не приведет к полностью обновленной странице.

Answer 5

Может быть, некоторые из предложенных решений работали в тот момент, когда был задан вопрос (март 2010 года), но сегодня, в августе 2014 года, решение об отключении пустых входов просто не работает. Отключенные поля также отправляются в моем Google Chrome. Однако я попытался удалить атрибут "name", и он работал нормально!

$('form').submit(function(){
    $(this).find('input[name], select[name]').each(function(){
        if (!$(this).val()){
            $(this).removeAttr('name');
        }
    });
});

Обновление: Хорошо, вероятно, причина того, что отключение полей мне не помогло, не в том, что что-то изменилось с 2010 года. Но все равно не работает в моем Google Chrome. Я не знаю, может быть, только в версии для Linux. В любом случае, я думаю, что удаление имени attr лучше, поскольку, несмотря на то, что политика использует браузер в отношении отключенных полей, невозможно отправить параметры, если имя attr отсутствует. Другое преимущество состоит в том, что обычно отключение полей подразумевает некоторые изменения стиля, и не очень приятно видеть изменение стиля в форме за секунду до окончательной передачи формы. Как отметил Макс Уильямс в комментариях, есть и недостаток, поскольку решение для удаления имени и атрибута не переключается. Вот способ избежать этой проблемы:

$('form').submit(function(){
    $(this).find('input[name], select[name]').each(function(){
        if (!$(this).val()){
            $(this).data('name', $(this).attr('name'));
            $(this).removeAttr('name');
        }
    });
});

function recoverNames(){
    $(this).find('input[name], select[name]').each(function(){
        if ($(this).data('name')){
            $(this).attr('name', $(this).data('name'));
        }
    });
}

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

Answer 6

Или сериализовать, очистить пустые пары ключ = значение с регулярным выражением и вызвать window.location:

$("#form").submit( function(e){
    e.preventDefault();
    //convert form to query string, i.e. a=1&b=&c=, then cleanup with regex
    var q = $(this).serialize().replace(/&?[\w\-\d_]+=&|&?[\w\-\d_]+=$/gi,""),
    url = this.getAttribute('action')+ (q.length > 0 ? "?"+q : "");
    window.location.href = url;
});

Answer 7

Ваша проблема помогла мне понять мою ситуацию, которая немного отличается - так что, возможно, кто-то еще может извлечь из этого пользу. Вместо прямой отправки формы мне нужно было запретить сбор пустых элементов формы в сериализованный массив, который , а затем был отправлен через AJAX.

В моем случае мне просто нужно было перебрать элементы формы и отключить все пустое, а затем собрать остатки в массив следующим образом:

// Loop through empty fields and disable them to prevent inclusion in array
$('#OptionB input, select').each(function(){
    if($(this).val()==''){
        $(this).attr('disabled', true); 
    }
});

// Collect active fields into array to submit
var updateData = $('#OptionB input, select').serializeArray();

Answer 8

Другой подход, который я всегда рекомендую, заключается в том, чтобы сделать это на стороне сервера, чтобы вы могли:

1. Правильно проверить входные данные
2. Установить значения по умолчанию
3. При необходимости измените входные значения.

В противном случае вам придется иметь дело с текстом.ввод, выбор, радио и т. д ...