Stuck on Step 10 Submit the Form using JavaScript "AJAX"

[ghost]

First of all thanks for the awesome solution. I cannot seem to get the steps (step 10) around ajax to work, I created the form-submission-handler.js file and put it in the root. The <script /> line I did put in the form file itself (components/contact-form/ContactForm.jsx). However, my console gives the error that the form-submission-handler.js file cannot be found: net::ERR_ABORTED 404 (Not Found). I tried multiple placements of the <script /> line and multiple paths towards the file (../../ etc.)

My guess is that it is quite an easy solution, but I just cannot find it since my level op expertise is still lacking. Hopefully you can help me along.

My repo (the branch that the changes are on): https://github.com/larstroost/bloom/tree/feature/form-email
Current location of the <script /> line: https://github.com/larstroost/bloom/blob/feature/form-email/components/contact-form/ContactForm.jsx

[mckennapsean]

I'm not sure if loading JS in JSX is tricky/possible (or the workflow by which you build it, if the file is in the right place).

I can take a look sometime, but could you try moving the JS into the component itself at all? JSX, so makes me think you are using React. We have had similar posts about Angular & Vue lately. It should be possible to "hack" the JS into the components to run once the DOM is loaded (or adjust the form to access the elements in a cleaner way). You basically just need to override the default submit action on the form submit button, and run the new callback there.

[ghost]

Thanks for the tip. I got it working using a fetch call and preventing the default.

handleSubmit = (event) => {
    event.preventDefault();
    const data = new FormData(event.target);

   fetch('https://script.google.com/macros/s/AKfycbwfuYCQvZ9IJ31zi51P_VEt26BPRrHkcbmCubPJJg/exec', {
      method: 'POST',
      body: data,
    });
    this.setState({ ...ContactForm.initialState });
  }

[mckennapsean]

Glad to hear you found a working solution, and thank you for posting an update for others!