Форма действия не перенаправляет при отправке - PullRequest
Новая
       13

Форма действия не перенаправляет при отправке

0 голосов
/ 12 марта 2019

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

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

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

  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 Ответ

0 голосов
/ 12 марта 2019

Например, как насчет этой модификации? Если событие может быть отменено, 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" из <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));
});

Справка:

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

...