Hi @minor glade. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#astro DB form submission
random thistleBOT
Based on the information provided in the knowledge sources, it seems like you're trying to insert form data into a table named ProjectDetails using Astro's database utilities. However, it's important to note that the db.insert() function is used with a Comment table in the examples provided in the knowledge sources.
Here's the corrected code snippet based on the examples provided in the knowledge sources:
import { db, ProjectDetails } from 'astro:db';
if (Astro.request.method === 'POST') {
// Parse form data
const formData = await Astro.request.formData();if (formData.has('name')) {
const project = {
name: formData.get('name'),
startDate: new Date(formData.get('startDate')),
endDate: new Date(formData.get('endDate')),
shortDescription: formData.get('shortDescription'),
logoUrl: formData.get('uploadedLogoUrl'),
websiteUrl: formData.get('websiteUrl'),
whitepaperLink: formData.get('whitepaperLink'),
discordLink: formData.get('discordLink'),
telegramLink: formData.get('telegramLink'),
twitterLink: formData.get('twitterLink'),
facebookLink: formData.get('facebookLink'),
category: formData.get('category'),
contactName: formData.get('contactName'),
contactEmail: formData.get('contactEmail'),
platform: formData.get('platform'),
symbol: formData.get('symbol'),
softCap: formData.get('softCap'),
hardCap: formData.get('hardCap'),
price: formData.get('price'),
origin: formData.get('origin'),
kycRequired: formData.get('kycRequired') === 'on',
restrictedCountries: formData.get('restrictedCountries'),
buyWith: formData.get('buyWith'),
fullDescription: formData.get('fullDescription'),
slug: createSlug(formData.get('name')) // You might want to gen // Process other form fields...
};
// Insert project data into the ProjectDetails table
await db.insert(ProjectDetails).values(project);
}
}
Please ensure that the `ProjectDetails` table exists in your database and that the `createSlug` function is defined in your code.
For more information on handling form requests and inserting data into your database with Astro, you can refer to the **Astro documentation** (<https://docs.astro.build/en/guides/astro-db#insert>).
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
minor glade
@random thistle this page errors and tries to submit the form below this as soon as the page loads.
random thistleBOT
Let me check the knowledge base for you. One moment! :books:
Based on the information provided in the knowledge sources, it's not clear why your page is trying to submit the form as soon as it loads. However, there are a few things you can check:
-
JavaScript Auto-Submit: Ensure there's no JavaScript code on your page that's automatically submitting the form when the page loads. Look for any function calls that are triggering the form's submit event.
-
Form Validation: Check if there are any form validation issues that might be causing the form to submit. For example, if you're using HTML5 form validation (e.g.,
requiredattribute), and you have a script that callsform.reportValidity(), it could cause the form to submit if all validations pass. -
Astro's ViewTransitions: If you're using Astro's
<ViewTransitions />component, it handles form submissions by default. If you want to prevent this, you can add thedata-astro-reloadattribute to your form. This will opt out of the default behavior and allow you to handle form submissions manually. Here's how you can do it:
<form action="/contact" data-astro-reload>
<!-- form fields here -->
</form>
Refer to the Astro documentation (https://docs.astro.build/en/guides/view-transitions#transitions-with-forms) for more details on handling form submissions with ViewTransitions.