Why is the following form not working when I put it in an Astro MDX page? The error is: 08:27:09 [ERROR] Unexpected end of file in expression, expected a corresponding closing brace for {
Stack trace:
at TransformContext.transform (file:///C:/c/mono/node_modules/.pnpm/@astrojs+mdx@3.1.0_astro@4.10.2_@types+node@20.14.2_typescript@5.4.5_/node_modules/@astrojs/mdx/dist/vite-plugin-mdx.js:54:15)
[...] See full stack trace in the browser, or rerun with --verbose.
Here is the form:
<h2>Contact Form</h2>
<form id="contactForm">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" required></textarea><br><br>
<input type="submit" value="Submit">
</form>
<script>
document.getElementById('contactForm').addEventListener('submit', function(event) {
event.preventDefault();
const formData = new FormData(event.target);
fetch('https://your-server-domain.com/submit_form.php', {
method: 'POST',
body: formData,
mode: 'cors',
headers: {
'Access-Control-Allow-Origin': '*'
}
})
.then(response => response.text())
.then(data => {
alert('Form submitted successfully: ' + data);
})
.catch(error => {
console.error('Error:', error);
});
});
</script>