I am making a web app and I have one form in it. I want to store the data that a person enters, in the form to be mapped in google sheets. The script successfully saves the data onto the sheet but upon saving I am redirecting the user to a new page. The problem is when I attach the code of data mapping, the redirection doesn't work but if I comment the code where I am calling the script, the redirection starts working.
# here is the code where i have made the form in HTML file using crispyforms
<form method="POST" id="submit_info" class="bg-light p-4 p-md-5 contact-form" name="google-sheet">
{% csrf_token %}
{{form|crispy}}
<div class="form-group text-center">
<input type="submit" value="Send Message" class="btn btn-primary center py-3 px-5">
</div>
</form>
This is the js code that executes to save the data onto google sheets
<script>
const scriptURL = 'https://script.google.com/macros/s/AKfycbwN9jxAQwA9f7qF_tvUbpuRpIhObeAJT8nAqwIRrDZYMPqbyf6j/exec'
const form = document.forms['google-sheet']
form.addEventListener('submit', e => {
e.preventDefault()
fetch(scriptURL, { method: 'POST', body: new FormData(form)})})
</script>
This is the code where I am handling the redirection and saving in django views.py file:
def store(request):
if request.method == "POST":
form = ContactForm(request.POST)
if form.is_valid():
form.save()
return redirect('thankYouPage') # a second webpage where user should be redirected
else:
form = ContactForm()
return render(request, 'home/index.html', {'form': form})