JavaScript 'Alert' Does NOT Pop Up My Success Message

Question

Hello I'm just finishing up a website for a page I have been working on. I added an HTML Form that allows a user/reader to enter there 'full name', 'email' and a 'message'. I connected my form to "google sheet" via a 'API' import and attached it with my JS code. When the 'Send Message' button is clicked, if the input was sent successfully then the 'Alert' tab pops up with a successfully sent message string.

However instead I kept getting just a JSON on a separate page from my web page. Something that looks like

{"result":"success","row":14}

I then checked over my JavaScript and I realized something was wrong though I don't understand how to fix it. This is the JavaScript

form.addEventListener('submit', e => {
  e.preventDefault()
  fetch(scriptURL, { method: 'POST', body: new FormData(Form) })
    .then(Response => alert("You have successfully submitted"))
    .catch(error => console.error("Error!", error.message))
})

The problem here is 'Response' it's declared but not read. How to fix this?

Answer 1

Hi everyone I figured out the problem/s. I did no reference the 'JavaScript' correctly in my HTML page and I also changed the name of the spreadsheet of which I did not apply to my form that is

const form = document.forms['my-sheet']

so when I fetched my scriptURL from the form it mapped to an unknown form. Also to note I only used the 'Alert' as an example to display some sort of feedback when the button was clicked. I am not using the 'Alert' function in my final draft of the project. This is what the corrected script looks like

<form name="your-sheet" id="contact" action="purchase.html" method="POST" autocomplete="off" target="_blank">

    const scriptURL = 'https://somerandomurl/google.com/morerandominfo/exec'
    const form = document.forms['your-sheet']
    
    form.addEventListener('submit', e=> {
    e.preventDefault()
    fetch(scriptURL, {
    method: 'POST'
    body: new FormData(form)})
    .then(response => alert("Successfuly submitted!"))
    .catch(error => console.error('Error!', error.message))})

Also sorry if my formatting is messy still trying to understand how to format. The 'Crtl+k' just puts the grey tab in and the 6 backstrokes don't do anything either.