Ok, I’ve got a real head scratcher here that’s kept me preoccupied for the past three days. Any help appreciated to help me keep some sanity.
I’ve tried to make a regular, non-complicated form submission and function trigger work through an AJAX submit, but no matter what I do, I seem to be getting the entire web page back in the response . The function never triggers.
I’ve read a thousand posts about getting a 404 back, but I’m actually getting my own page right back in my face.
At first, I thought this was due to some incompatibilty in the UI library I’m using (Chakra), or possibly in the localization library.
However, now I’ve set up a pared down version on my website, and the results are the same.
When developing locally, I’ve sometimes been able to trigger the function, but I have no idea why. It just happens. In production, it just never works.
The original form is here: https://www.sawalist.com/en/jadenaturalspasalon (click review, results are logged to console). This is just prototyping right now, so enter anything in the modal.
The pared down version (code below) is here: https://www.sawalist.com/form_ajax.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contact</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<!-- A little help for the Netlify post-processing bots -->
<form name="contact" netlify netlify-honeypot="bot-field" hidden>
<input type="text" name="name" />
<input type="email" name="email" />
<textarea name="message"></textarea>
</form>
<div id="root"></div>
<script type="text/babel">
const encode = (data) => {
return Object.keys(data)
.map(
(key) =>
encodeURIComponent(key) + "=" + encodeURIComponent(data[key])
)
.join("&");
};
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = { name: "", email: "", message: "" };
}
/* Here’s the juicy bit for posting the form submission */
handleSubmit = (e) => {
fetch("/", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: encode({ "form-name": "contact", ...this.state }),
})
.then(function (response) {
return response.text().then(function (text) {
console.log(text);
});
})
.catch((error) => alert(error));
e.preventDefault();
};
handleChange = (e) =>
this.setState({ [e.target.name]: e.target.value });
render() {
const { name, email, message } = this.state;
return (
<form netlify netlify-honeypot="bot-field" name="contact" onSubmit={this.handleSubmit}>
<p>
<label>
Your Name:{" "}
<input
type="text"
name="name"
value={name}
onChange={this.handleChange}
/>
</label>
</p>
<p>
<label>
Your Email:{" "}
<input
type="email"
name="email"
value={email}
onChange={this.handleChange}
/>
</label>
</p>
<p>
<label>
Message:{" "}
<textarea
name="message"
value={message}
onChange={this.handleChange}
/>
</label>
</p>
<p>
<button type="submit">Send</button>
</p>
</form>
);
}
}
ReactDOM.render(<ContactForm />, document.getElementById("root"));
</script>
</body>
</html>
