#Forms and scripts in Astro

3 messages · Page 1 of 1 (latest)

eternal bane
#

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>

austere rootBOT
#

Hi @eternal bane. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The error message you're seeing suggests that there's an issue with the way your JavaScript is being interpreted in the Astro MDX file. In Astro, you need to be careful about how you include JavaScript in your components.

According to the Astro documentation (https://docs.astro.build/en/tutorial/2-pages/3/#test-your-knowledge), you need to write your JavaScript inside curly braces when you're inside the HTML template section of an Astro component or between the code fences in an Astro component.

Also, when adding scripts to your Astro components, you can use standard HTML <script> tags. This allows you to send JavaScript to run in the browser and add functionality to your Astro components. Astro processes and bundles <script> tags, adding support for importing npm modules, writing TypeScript, and more (source (https://docs.astro.build/en/guides/client-side-scripts/#_top)).

However, if you're using an Astro MDX file, you need to be aware that certain characters have a special meaning in Markdown and MDX. For example, to prevent { being interpreted as the beginning of a JavaScript expression in MDX, you might need to write &amp;lcub; (source (https://docs.astro.build/en/guides/markdown-content/#escaping-special-characters)).

If you're still having trouble, it might be helpful to check out the Astro error reference (https://docs.astro.build/en/reference/error-reference/#_top) or the Vite troubleshooting guide (https://vitejs.dev/guide/troubleshooting.html) for more information.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: