Как исключить из отправки формы пустые значения?

Question

[evomed]

Форма

<form :action="route">
поля с onchange="this.form.submit()"
</form>

отправляет все значения формы на урл с перезагрузкой страницы. Как исключить из отправки значения с null? На бэке обрабатываю, но все пустые параметры формы в урл&parametr= хотелось бы исключить

Answer 1

[0xD34F]

с перезагрузкой страницы

Ну тогда можно особо и не церемониться - вешайте на форму обработчик submit, в нём элементы, чьи значения надо исключить, удаляйте (el.remove()) или делайте неактивными (el.disabled = true). Например:

<form @submit="onSubmit">
  <div v-for="(v, k) in formData">
    <div>{{ k }}:</div>
    <div><input v-model="formData[k]" :name="k" :ref="k"></div>
  </div>
  <button>submit</button>
</form>

data: () => ({
  formData: {
    forename: '',
    surname: '',
    email: '',
  },
}),
methods: {
  onSubmit() {
    Object.entries(this.formData).forEach(([ k, v ]) => !v && (this.$refs[k][0].disabled = true));
  },
},

Comments

[evomed]

У меня не получится через foreach т.к. индвидуальная верстка для блоков (списки, инпуты, чекбоксы и т.д.). Также кнопки submit у меня нет т.к. форма отправлялась при каждом изменении поля с помощью onchange. Не могу понять как ваш код к себе встроить и адаптировать. Пробую так методом тыка)

<form :action="route" @submit="onSubmit">
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.name" type="text" class="form-control float-right" name="name" ref="name" onchange="this.form.submit()">
    </div>
  </div>
</form>

----

onSubmit() {
    Object.entries(this.filter).forEach(([ name ]) => !name && (this.$refs[name][0].disabled = true));
},

[0xD34F]

evomed, ну тогда просто получаете список элементов формы и обрабатываете его:

onSubmit(e) {
  [...e.target.elements].forEach(n => !n.value && n.remove());
},

[evomed]

0xD34F, список элементов это названия полей или что? Как его передать? вот так @submit="onSubmit(this.filter)"
в урле без изменений с пустыми значениями. Если названия @submit="onSubmit({'name', 'pages'})" компонент отваливается

[0xD34F]

evomed, оставьте как было. Если бы требовалось изменить подключение обработчика, я бы об этом написал.

[evomed]

0xD34F, если так

<form :action="route" @submit="onSubmit">
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.name" type="text" class="form-control" name="name" onchange="this.form.submit()">
    </div>
  </div>
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
     <input v-model="filter.pages" type="text" class="form-control" name="pages" onchange="this.form.submit()">
    </div>
  </div>
</form>

----

onSubmit(e) {
  [...e.target.elements].forEach(n => !n.value && n.remove());
},

то все равно отправляет в урл пустые значения урл?name=asdasd&pages=

[0xD34F]

evomed,

<form :action="route" ref="form">
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
      <input v-model="filter.name" type="text" class="form-control" name="name" @change="submit">
    </div>
  </div>
  <div class="col-md-4 mb-3">
    <div class="col-xs-10">
      <input v-model="filter.pages" type="text" class="form-control" name="pages" @change="submit">
    </div>
  </div>
</form>

methods: {
  submit() {
    const { form } = this.$refs;
    [...form.elements].forEach(n => !n.value && n.remove());
    form.submit();
  },
},

[evomed]

0xD34F, спасибо! до такого варианта я бы сам точно не допер)

[evomed]

0xD34F, кажется я понял как работает данный метод. Он физически удаляет поля. Возможно ли как-то обойти этот момент? Чтобы при каждом запросе пустые поля не исчезали из формы, а то выглядит не очень.

[0xD34F]

evomed, вариант без удаления был предложен изначально. Перечитайте ответ.

[evomed]

0xD34F, там с кнопкой submit, а у меня отправка после изменения поля

[0xD34F]

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

[evomed]

0xD34F, так правильно?

[...form.elements].forEach(n => !n.value && (n.disabled = true))

[0xD34F]

evomed, не знаю. А вы что скажете?