Как отправить данные формы только из заполненных полей

281

12 декабря 2016, 10:03

Есть форма с разными инпутами

<form action="" method="get">
    <input name="locality"  type="text">
    <select name="currency">
        <option value="">Выбрать</option>
        <option value="RUB">руб.</option>
        <option value="USD">евр.</option>
    </select>
    <button type="submit">submit</button>
</form>

в реальной задаче инпутов гораздо больше. Чтобы не загромождать строку запроса, нужно сделать так, чтобы отправлялись только заполненные поля.

Заранее скажу, что нужно отправлять именно методом GET,т.к это запрос на получение данных и нужно иметь возможность поделиться ссылкой

Answer 1

Работает такое решение: перед отправкой, пустые поля делаем disabled.

$('button').click(function(e) {
    e.preventDefault();
    $('input').each(function(){
        if ($(this).val() == '')
            $(this).attr('disabled', true);
    $('select option:selected[value=""]')
        .parent()
        .attr('disabled', true);
    });
    $('form').submit();
});

Может кто-то посоветует что-то лучше?

Answer 2

Попробуйте так

   function disableder (form) {
      var elements = form.elements; // Получаем все инпуты формы
      elements = Array.prototype.slice.call(elements) // превратим в массив
      elements = elements.filter(function (el) { // кнопочки незачем дизейблить
        return !(el.type == 'submit' || el.tagName == 'button');
      });
      elements.forEach(function (el) {
        if(el.value == '') el.disabled = true;
      });
    }

Демо

Тут параметр form, это ссылка на проверяемую форму