Ладно, либо я плохо обьяснил либо ты не понял вопрос.

Есть UI ( это Javascript компонент )
там заполняются 20 полей, ну и они существуют в виртуальном DOM

Чтобы передать их на backend нужно либо послать api запрос на сервер

Понял. Немного не то )

trackid можно тупо тогда в  data: передать, без инпута

А button в form не пробовал добавить?)

Так я специально его убрал оттуда)

Да, это пример из моей песочницы) Для наглядности)

Ну у меня проосто есть дизайн,
там дизайнер сделал форму снизу страницы, а кнопку submit где то в вверху
дизайнер != разработчик)))

Зачем?! 🤔

Ну тогда указывай id формы в кнопку

Я пока что сделал скрытую форму, и там заполняются поля из javascripta
немного напрягают те инпуты

<button form="status" type="submit"></button>

Так форма по клику на кнопку не отправляется же?

Понял. Спасибо.
Нашел что-то такое
https://stackoverflow.com/questions/3991204/how-to-create-a-form-dynamically-using-javascript

Но то будет еще сложнее чем оставить как есть

По клику на кнопку отправляется так как скрытые поля заполнены

Ну понял, я просто сделал копию формы потому что удобнее было написать форму на js нежели просто.

Если интересно то я могу скинуть фотку UI
посмотришь как сделал

🙊

Есть подозрения, что ты смотришь на потенциальную проблему не под тем углом.
Нет никакого смысла пытаться запретить изменения на клиенте. Твою форму на JS так же просто отредактировать, как и инпут. Возможно, понадобится школьник на пол года старше. Зато ты офигеть какой боли доставишь себе и остальным, кто будут это поддерживать потом.
Что такого тебе необходимо передавать с фронта и быть уверенным, что клиент это не подменил?

+++

Чел психанул и написал свой Livewire + alpine.js
Точнее, либу, общающуюся с бэкендом laravel по тому же принципу, что и livewire, но более абстрактную, её можно пихать в существующее vue-приложение как транспортный слой, например
Назвал Airwire
https://archte.ch/blog/introducing-airwire