Fetch JSON form input to print in HTML

[rishavdhar96]

Objective (what I would like)

1. Create a basic “Contact Me” form that posts form input data to a Google Sheet using Fetch API.
2. Upon submission, replace the HTML form with a statement: “Thanks for your message, JSON.name.” where JSON.name should be substituted by the Name input from the form.

Progress (what I’ve done so far)

Using the guide linked above, I’ve made a Contact form which successfully feeds input data into a Google Sheet (yet to get notification emails for new submissions working, but that’s for another day). Here’s the live functional demo.

However, I cannot fathom how to extract the relevant bit of the JSON out of the form response and print it directly in HTML, in order to check off the second point. Here is my underlying Javascript.

Help (where I need you…)

Is it possible to extract the Name input out from the JSON response? If so, how do I manipulate it to be able to print it in HTML?

---

The Javascript links leads to my public GitLab repository to get a better idea of the context.
Please let me know if I can provide any more useful information. Thank you for your time.

[m_hutley]

What IS the response? You say it’s JSON, what’s it’s structure?

[rishavdhar96]

Thanks for your prompt response, @m_hutley, and a good question too… You may have me stumped already.

To observe the response, please feel free to visit the site, open the console and submit the form with any data to observe the structure of the response. This is what I observe:

Response {type: "cors", url: "https://script.googleusercontent.com/macros/echo?u…6V-rV9yhQ38&lib=MbqL8rlNjc5gwjhFxvCznj8cHFzf4Vu8p", redirected: true, status: 200, ok: true, …}

I’m sorry I can’t provide anything more than that. I’ve already shared a link to the Javascript on the Contact page so here’s a copy of the script that’s happening “server-side” on the Google Sheet itself. Do let me know if that helps!

[m_hutley]

As far as I can see, the remote script doesnt hand back anything like a name, its body just contains a “success” and “row” (presumably the row of data it inserted). You could suck the name out of the field before you send the form and then use it in the return though.

  var temp = document.getElementsByName('name')[0].value;
  fetch(scriptURL, {
    body: new FormData(form),
    method: 'POST',
  })
  .then(function (response) {
    form.innerHTML = 'Thanks for your message, ' +  temp;
    return console.log('Success!', response);
  })

[rishavdhar96]

Thanks for following up, @m_hutley. I can’t believe how easy you made it look!

That was all it took; just extracting the ‘name’ input field value before posting the data and printing the variable into HTML. Boy, is my face red…

Thank you so much for your time and patience to explain your solution with a detailed example directly in situ with the existing code. I really appreciate your effort. It’s also amazing how far you can go to provide dynamic interactivity on just a static website.

Please feel free to let me know if there’s any further “administrative” functionality I should use to mark your post as the one that provided the perfect solution and close the thread.

[rishavdhar96]

Thanks to your help, here’s a completely functional CodePen demo for future readers. Hope it helps!

https://codepen.io/rdhar/pen/bvMjyV