CD
Cloudflare Developers•5mo ago
Skekung

Form submission not triggering anything server-side.

I'm working on a contact form that on clicking send should send an email. However after submitting the form I see no activity in chrome devtools network or logs despite having extensive logging within my server side code. I am watching via devtools and npx wrangler tails. I do see the INIT log right after its finished deploying. I suspect its the link between svelte code and typescript code because of the lack of logs. I am using svelte + typescript. 
<form method="post" use:enhance>
                {#if form?.send_success}
                    <h2>And... sent! We'll respond as soon as we can</h2>
                    <p>Alternatively, you can message us on one of the platforms listed.</p>
                {:else}
                    <h2>Fill in the form and we'll get back to you</h2>

                                         <label for="email">Email Address:</label>
                    <input type="email" id="email" name="email" required bind:value={email} />
... etc
<form method="post" use:enhance>
                {#if form?.send_success}
                    <h2>And... sent! We'll respond as soon as we can</h2>
                    <p>Alternatively, you can message us on one of the platforms listed.</p>
                {:else}
                    <h2>Fill in the form and we'll get back to you</h2>

                                         <label for="email">Email Address:</label>
                    <input type="email" id="email" name="email" required bind:value={email} />
... etc
console.log('INIT');

export const actions: Actions = {
    default: action
};

async function action(event: any) {
    console.log('EMAIL EVENT REQUEST', event.request);

        const clientIP = event.request.headers.get('X-Forwarded-For');

    if (clientIP !== null && !ipBucket.check(clientIP, 1)) {
        return fail(429, {
            message: 'Too many requests',
            email: ''
        });
    }

    const formData = await event.request.formData();
    console.log('Form data:', formData);

    const email = formData.get('email');
    console.log('Email:', email);

    const subject = formData.get('subject');
    console.log('Subject:', subject);

    const content = formData.get('content');
    console.log('Content:', content);
... etc
console.log('INIT');

export const actions: Actions = {
    default: action
};

async function action(event: any) {
    console.log('EMAIL EVENT REQUEST', event.request);

        const clientIP = event.request.headers.get('X-Forwarded-For');

    if (clientIP !== null && !ipBucket.check(clientIP, 1)) {
        return fail(429, {
            message: 'Too many requests',
            email: ''
        });
    }

    const formData = await event.request.formData();
    console.log('Form data:', formData);

    const email = formData.get('email');
    console.log('Email:', email);

    const subject = formData.get('subject');
    console.log('Subject:', subject);

    const content = formData.get('content');
    console.log('Content:', content);
... etc
7 Replies
Skekung
SkekungOP•5mo ago
@Fizzgig
Razboy20
Razboy20•5mo ago
If there is no activity in the devtools network panel, then this doesn't seem like an issue on Cloudflare's side. I would recommend asking Svelte people for support!
Skekung
SkekungOP•5mo ago
Alright cool, thanks!
Fizzgig
Fizzgig•5mo ago
hey raz, we isolated the issue to ASSETS binding, if we remove the assets binding it works as expected. I saw in another forum that this is only a bug with the free tier and so we are probably going to upgrade the post in question: https://community.cloudflare.com/t/console-log-doesnt-work/784364/6
Fizzgig
Fizzgig•5mo ago
not sure what the timeframe on this is though
No description
Razboy20
Razboy20•5mo ago
Hm, that issue wouldn’t affect why you can’t see any network activity in devtools You’re sure no request is fired off?
Fizzgig
Fizzgig•5mo ago
Pretty sure but we can do some more testing hi raz, you were right. it seems the issue was a conflict between use:enhance and a handleSubmit function on the form button this issue can be closed @Skekung

Did you find this page helpful?