Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Как по простому обработать ошибку при отправке формы и вывести ее в alert? (https://javascript.ru/forum/events/84768-kak-po-prostomu-obrabotat-oshibku-pri-otpravke-formy-i-vyvesti-ee-v-alert.html)

sovsem-nub 14.12.2022 10:50

Как по простому обработать ошибку при отправке формы и вывести ее в alert?
 
Есть такая форма для сайта от гугл форм

<iframe name="my_iframe" style="display:none;"></iframe>
<form action="https://docs.google.com/forms/d/16i928dXsTVbTo1TYxm0Ehd8BYrYyNc4jxfef6tak04Y/formResponse" method="POST" target="my_iframe" ><input name="entry.380347480" aria-label="order_number" ></input><input name="entry.1423219090" aria-label="name" ></input><input name="entry.774720101" aria-label="email" ></input><input name="entry.1229029910" aria-label="telephone" ></input><input name="entry.1932354453" aria-label="delivery_adress" ></input><input name="entry.1783446383" aria-label="link_for_your_order" ></input><textarea name="entry.839799310" aria-label="client_comments" ></textarea><textarea name="entry.766941228" aria-label="manager_comments" ></textarea>
<input type="submit" name="rsubmit" value="Готово"></form>


Она нормально работает (хотя зачем-то инпутами закрыта).
Но даже если нет интернета, она все равно браво рапортует, что все ок и она отправлена и только в консоли видна красная ошибка.
Как можно вывести эту ошибку в alert, чтобы человек понял, что форма не ушла? И желательно по какой причине.

ksa 14.12.2022 12:50

Как вариант отправлять данные формы самому, тем же fetch(). Тогда можно будет анализировать "успех или не успех"...
https://openjavascript.info/2022/04/...pts-fetch-api/

sovsem-nub 14.12.2022 13:17

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

Access to fetch at 'https://docs.google.com/forms/d/16i928dXsTVbTo1TYxm0Ehd8BYrYyNc4jxfef6tak04Y/formResponse' from origin 'https://null.jsbin.com' has been blocked by CORS policy

ksa 14.12.2022 14:44

Цитата:

Сообщение от sovsem-nub
blocked by CORS policy

Это защита от кросдоменных запросов...
https://habr.com/ru/company/macloud/blog/553826/

sovsem-nub 14.12.2022 15:21

Да, это яндекс выдает и тоже не работает. По крайней мере с моими "ровными " руками.

sovsem-nub 15.12.2022 10:51

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

ksa 15.12.2022 11:23

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

sovsem-nub 15.12.2022 12:02

перепробовал все заголовки из этой статейки. Там кстати ошибок много, часть символов в коде пропущено (плохой копипаст) и в комментариях написано, что уязвимость, благодаря которой можно обойти CORS есть не везде. Какие заголовки отправляет простая форма?

ksa 15.12.2022 15:05

sovsem-nub, вот вариант отправки "как форма"...
<form id="formElem">
  <input type="text" name="name" value="John">
  <input type="text" name="surname" value="Smith">
  <input type="submit">
</form>

<script>
  formElem.onsubmit = async (e) => {
    e.preventDefault();

    let response = await fetch('/article/formdata/post/user', {
      method: 'POST',
      body: new FormData(formElem)
    });

    let result = await response.json();

    alert(result.message);
  };
</script>

https://learn.javascript.ru/formdata

ksa 15.12.2022 15:11

Цитата:

Сообщение от sovsem-nub
Какие заголовки отправляет простая форма?

Цитата:

Простые заголовки – разрешены только:
Accept,
Accept-Language,
Content-Language,
Content-Type со значением application/x-www-form-urlencoded, multipart/form-data или text/plain.
https://learn.javascript.ru/fetch-cr...rostye-zaprosy


Часовой пояс GMT +3, время: 19:22.