Learn-to-send-email-via-google-script-html-no-server: Cannot get the page to stop changing to the JSON result

[user0099]

Hi,
When I hit the submit button, I am redirected to the JSON page results instead of the "thank you" page, this despite the fact that I followed every step of the tutorial to the letter.
I am using a personnal html page, so I did modify the id of the form in the form-submission-handler.js file accordingly.
As for my browser, it is Mozilla Firefox, which, to the best of my knowledge, supports AJAX.

If I made a mistake, I can't seem to figure it out...

Could you please help me ?

[mckennapsean]

Sounds like the clientside JS is not loaded correctly. Have you checked your console logs for any errors? It sounds like it isn't loading correctly.

[user0099]

Thank you for your quick answer ! :)
The console log says that "Contact form submission handler loaded successfully."

[mckennapsean]

And when you hit submit, does it print anything? Any error messages? If not, then I do not know without looking at it what is going on.

[user0099]

Alas, it does not print error messages.
Here is a zip containing my index.html, script.js as well as the clientside JS in which I changed the IDs to correspond to those of my html file:
myProject.zip

This is the second website I create, a simple page with a form to order and two buttons: one that will open a modal to either confirm or cancel the order, and another button that will open a second modal, displaying a contact form (so in the end, there are two forms).
For now I modified the clientside JS to only work with the order form (the one that displays on the page when we get access to the site). Besides, I modified the "thank you" message to display yet another modal instead of a div (I tried with the div as it is in the tutorial, but it did not work either).

[mckennapsean]

Thanks for attaching those. The ID of order-modal does not match that of the <form> element so that is what I would expect, it is basically doing nothing as if you didn't load our JS at all.

Also, the IDs on the HTML site must be unique or the form selection logic may not work. I would fix that. Duplicates are a problem when you select by ID (expect them to be unique, which they should be, that's the best practice).

Your specific issue may be because the form logic is not getting attached. The loaded() function is binding all of our clientside JS logic to the on submit events for a <div> rather than a <form> element. Make sure you change that ID to be that of the form you want to submit.

If you have more than one, which it looks like you do, then you would want to make sure you pass in the form ID to reselect or a reference or something so that you can basically activate this logic twice when loading the page, once for each form.

[user0099]

I actually did so before: I used the ID of the "order form" (#order-form) in the form-submission-handler.js file, but it did not work either, so I later tried with the ID of the "order modal" (#order-modal) to see if there is a difference but obviously, it was not the case.

As for the IDs on my HTML index file, I checked and not two elements use the same ID.

[mckennapsean]

Looks like you don't have a normal submit button on the main form? Not sure offhand, but the first form with that ID doesn't seem to submit itself but put its data into another element and then submits on confirmation?

Wherever you are sending data to the server, the actual submission, that is where you want this logic to grab the form data and send it. Any sooner wouldn't matter, I guess you could prep it but no need, just do it when the user is ready to submit it.

From the provided file, three duplicate IDs: date-label, name, email, & return-button (linters are great for this, and there are sites to paste HTML to validate it, this would be invalid due to that at least) - oh, and the html tag is never closed. Again, linters are your friend. :)

[user0099]

The submit button does indeed put the main form data into the order modal dialog, which then submits on confirmation (it is then that the data is sent to the server), which is why I modified the ID on the JS file to match that of the modal dialog, but the results where the same.

I must be blind lol ^^
Thank you for helping me spot those, I will be using linters from now on :)

[mckennapsean]

it sounds like you need to debug what's going on and what callbacks are getting run when to figure this one out.

[mckennapsean]

any luck making progress on this @user0099 ? I was trying to help debug your issue, but I do have limited time to look at the infinitely many ways someone can use this script in different applications :) I hope things did pan out eventually.

[itsblakewillis]

@mckennapsean I am getting this same result (I think).

Backstory -

I was having problems with the form submitting but once I move the JS to my host and switched the id to class as suggested that fixed that problem...

But now I get the print out

{"result":"success","data":"{\"number\":[\"3\"],\"size\":[\"8x10\"],\"name\":[\"Blake Tiggemann\"],\"email\":[\"[email protected]\"]}"}

The javascript seems to be loading fine but isn't creating the success message. I'll keep looking and changing things and see if I can get it to work.

[mckennapsean]

@itsblakewillis do you have a sample site or anything you could share where it isn't working as intended? there is a sample codepen in our README's FAQs.

[itsblakewillis]

@mckennapsean

I figured it out...I was missing the form elements div inside the form I wanted hidden and replaced upon submit.

Thank you for your help.

[mckennapsean]

glad to hear it worked out as well! 🎉

still need an example from the OP or we're unable to help.

[itsblakewillis]

@mckennapsean what is the OP?

[mckennapsean]

the person who filed the ticket / the first person to post

https://www.google.com/search?q=op+original+poster&oq=op+original+poster&aqs=chrome..69i57j0l2.6940j1j7&client=ms-android-google&sourceid=chrome-mobile&ie=UTF-8

[varungolusupudi]

@mckennapsean I am getting the same error which the others faced.

My problem is that the javascript file is not loading instead, I am getting the result.
Can you help me that?

[mckennapsean]

Yeah you need the JS file loading in order to prevent the redirect (or add some custom handler to override the default behavior).

Without an example to look at, can’t really be of more help probably!