LINUX.ORG.RU
Форум — Web-development  

Веб-формы без кнопки Submit: как это нынче делается с Laravel/Vue/jQuery ?

 , ,


0

5

Есть веб-форма без кнопки Submit. На ней есть текстовое поле.

Вопрос: как нынче организовывают сохранение значения, введенного в это поле?

Пока что вижу следующий примитивный путь:


  • Через jQuery вешается обработчик на текстовое поле на событие focusout;
  • В обработчике формируется AJAX-запрос через jQuery функцию $.ajax(), в запросе не забываю про csrf_token();
  • В Laravel делаю контроллер, который принимает Ajax данные, вычленяет из них переданное значение поля, сохраняет в базу;
  • Контроллер возвращает строку ошибки. Если пустая - ошибки нет, иначе на странице должно всплыть предупреждение что данные не могут сохраниться.


Следует ли делать так сохранение значения, или сейчас делают как-то по-другому? Через Vue вместо jQuery или еще как? В Laravel может есть готовые классы/механизмы для этого?

Дайте краткое описание и ссылки на доку/howto, желательно на русском.

★★★★★

Ответ на: удаленный комментарий

laravel+vuejs

В обучающих видео дикий оверхед: создание VUE-компонентов, которые работают с Laravel. Вопрос был про простое текстовое поле.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от Xintrea

рано или поздно придется осваивать vue, если хочешь быть в тренде. он легкий: где-то дня 3-4 потратишь на чтение документации и ok. бери vuetify и клепай формы.

tz4678 ★★
()

Через jQuery вешается обработчик на текстовое поле на событие focusout;

это, впрочем, не новость, но ты дурак? нахрена тебе jQuery если у всех инпутов есть 

<element onchange="myFunction(this.value)">

anonymous
()

Не делай так, пожалей людей, которые этим будут пользоваться.

anonymous
()
Ответ на: комментарий от anonymous

нахрена тебе jQuery если у всех инпутов есть
<element onchange=«myFunction(this.value)»>

Оу, предлагаешь поведение прописывать прямо в представление? Молодец, специалист.

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от tz4678

бери vuetify и клепай формы.

Я не совсем понял, как этот фреймверк соотносится с вопросом. То что я вижу, это что он недалеко ушел от bootstrap, просто в нем есть реактивность на уровне JavaScript.

Никаких инструментов по отправке данных из форм в документации не нашел. Может покажете напрямую где там post или ajax средсвами vue?

Xintrea ★★★★★
() автор топика
Ответ на: комментарий от Xintrea

Оу, предлагаешь поведение прописывать прямо в представление? Молодец, специалист.

сразу видно какая функция будет вызвана

Int0l ★★
()
Последнее исправление: Int0l (всего исправлений: 1)
Ответ на: комментарий от Xintrea

там нету встроенных средств для работы сетью. vue - это лишь modelview. нужно ставить axios, если не устраивает обычный fetch.

tz4678 ★★
()
Ответ на: комментарий от Xintrea

А без инлайна или библиотек ты сам припаять обработчик событий не можешь что ли?

anonymous
()
Ответ на: комментарий от tz4678

какой-то аутист удалил ссылку на гугол и написал, что это спам. ржу

tz4678 ★★
()
Ответ на: комментарий от tz4678

там нету встроенных средств для работы сетью. vue - это лишь modelview. нужно ставить axios, если не устраивает обычный fetch.

то есть на вопрос как отправлять даные — посоветовали библиотеку которая умеет всё кроме этого :-) ..

отличная нынче мода и трэнд.

вообще-то авто не написал что у него есть какие-то проблемы с modelview — возможно он сделал modelview и без этих ваших Vue. отсутствие фрэймворка не обозначает остутствие раздения в коде

anonymous
()
Ответ на: комментарий от anonymous

JQuery в 2019 тоже не нужен:

const $ = (q, e = document) => [...e.querySelectorAll(q)]
tz4678 ★★
()
Ответ на: комментарий от anonymous

веб-компоненты как бы уже есть, но там много велосипедить

tz4678 ★★
()

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

deep-purple ★★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development