Button onClick not working in Gatsby build

Hi; I am planning to migrate my website from Wordpress to Gatsby. My plan is that I will use my existing Bluehost account to avoid any complications with transferring domains, especially that I will still use my Wordpress API for the back end. Accordingly, I will build my website locally using, then I will upload the “public” folder to my host folders. Now the case is that I need to add a contact form, I am planning to use ajax call from the front end to a PHP file on my server to send the email.

The issue I am facing now is that when I add the onClick prop to the button, the event fires on the development phase. However when I run gatsby build and upload the HTML files on the server, no event is fired, I inspected the <button> tag, it has no onclick event. This is my code on front end:

        <input type="text" id="fname" value="John" />
        <input type="email" id="mail" value="" />
        <input type="text" id="subject" value="" />
        <input type="text" id="content" value="" />
        <button
          onClick={() => {
            console.log("What's going on?")
            sendMail()
          }}
        >
          Send Email
        </button>

This is the mail ajax function. I tried to add it to the front end, and I also tried to add it as a script with the react Helmet component linking to an external file. In all cases, no event is fired when I upload the public folder on the host.

const sendMail = () => {
  console.log("function called from inside")
  var display = document.getElementById("firstname")
  var mail = document.getElementById("mail").value
  var name = document.getElementById("fname").value
  var content = document.getElementById("content").value

  var subject = document.getElementById("subject").value
  var xmlhttp = new XMLHttpRequest()
  xmlhttp.open("POST", "contact-form.php")
  xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
  xmlhttp.send(
    "fname=" +
      name +
      "&subject=" +
      subject +
      "&content=" +
      content +
      "&mail=" +
      mail
  )
  xmlhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200) {
      display.innerHTML = this.responseText
    } else {
      display.innerHTML = "Loading..."
    }
  }
}

Thanks for your support

[mkhaledche]

It worked now. The issue was with pathPrefix. Thanks @muescha

[mkhaledche]

Thanks @muescha for your reply. I’ll check the path prefix and the solution in the video which seems to be interesting. However, in my case, I don’t think I need the form tag as all the functionality I need is a button that collects some input values and sends them to the server through ajax requests. I have already tested it on a non-gatsby static file with no form tag and it worked well.