Блог

Главная - Вопросы по программированию - Действие формы не перенаправляется при отправке

Действие формы не перенаправляется при отправке

#html #forms #submit #action

#HTML #формы #Отправить #Экшен

Вопрос:

У меня интересная ситуация, поскольку я создаю HTML-форму, выводимую непосредственно в Google Sheet (подробнее здесь:https://github.com/jamiewilson/form-to-google-sheets ). Однако действие моей формы не перенаправляется, поскольку страница просто остается неизменной при нажатии кнопки отправки. Таблица Google записывает ввод, но на веб-странице не делается указание. Я хотел бы перенаправить на совершенно другую страницу.

Я заметил, что это распространенный вопрос, но все остальные ответы либо а) перенаправляют и не отправляют ответ пользователя, либо б) отправляют ответ, но без перенаправления.

Заранее спасибо.

   const scriptURL = 'https://script.google.com/macros/s/AKfycbyoQPDaaR1YTUFjkU7weJ_Y9uCTE7hoOK_5yUQVjE8EjVuEIRBh/exec'
  const form = document.forms['submit-to-google-sheet']

  form.addEventListener('submit', e => {
    e.preventDefault()
    fetch(scriptURL, { method: 'POST', body: new FormData(form)})
      .then(response => console.log('Success!', response))
      .catch(error => console.error('Error!', error.message))
  })  
 <!doctype html>
<html>
	<head></head>
<body>

<form name="submit-to-google-sheet" action="https://www.google.com">
  <input name="email" type="text" placeholder="insert text">
  <input id="submit" name="submit" type="submit" value="Submit">
</form>

	</body>
</html>

Ответ №1:

Например, как насчет этой модификации? Если событие может быть отменено, preventDefault() используется для отмены события. В вашей ситуации я хотел бы предложить 2 шаблона.

Простой шаблон:

Как насчет простого изменения, как насчет удаления e.preventDefault() ?

От:

 form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message))
})

Для:

 form.addEventListener('submit', e => {
  fetch(scriptURL, { method: 'POST', body: new FormData(form)})
    .then(response => console.log('Success!', response))
    .catch(error => console.error('Error!', error.message));
})

Другой шаблон:

В качестве другого шаблона, если вы хотите перенаправлять только тогда, когда fetch() не возвращает ошибки, как насчет следующей модификации? В этом случае action="https://www.google.com" of <form name="submit-to-google-sheet" action="https://www.google.com"> не используется.

Пример сценария:

 form.addEventListener('submit', e => {
  e.preventDefault();
  fetch(scriptURL, {method: 'POST', body: new FormData(form)})
    .then(response => {
      console.log('Success!', response);
      window.location.href = "https://www.google.com";
    })
    .catch(error => console.error('Error!', error.message));
});

Ссылка:

Если это был не тот результат, который вы хотите, я приношу извинения.

Комментарии:

1. @charleshawk Спасибо за ваш ответ. Я рад, что ваша проблема была решена.