guys i know this seems a easy question for some but i am working on this problem for the past 1 week and can seem to work it out i have a frontend which is trying to submit data to libsql/client db named as users but as the api/newUsers.json is fetched from frontend it gives me error please look at the code tell me what i am doing wrong here i have tried everything on the internet i can found as these technologies are still new i couldn't find anything helpful so please give a few minutes and see my problem issue here if you can tell me its going to be a great help
main problem: Data Submission leads to Bad request \syntax error or 'Content-Type' errors
even though i have tried both
this is the code for the frontend
CODE
import turso from "../lib/tursodb";
<div class="flex justify-center place-items-center h-screen w-screen">
<form
id="RegisterForm"
class="flex flex-col gap-8 justify-center place-items-center"
accept-charset="utf-8"
>
<div class="flex gap-4 justify-around w-full">
<label for="Create name">Create name</label>
<input required="true" id="name" placeholder="name" />
</div>
</form>
<div class="flex gap-4 justify-around w-full">
<label for="Create Username">Create Username</label>
<input required="true" id="username" placeholder="Username" />
</div>
</div>
<div class="flex gap-4 justify-around w-full">
<label for="Email">Email</label>
<input required="true" id="email" placeholder="Email" type="email" />
</div>
<div class="flex gap-4 justify-around w-full">
<label for="ID-no">Id-no</label>
<input
required="true"
id="memberID"
placeholder="job-id,staff-id,doctor-id no"
type="text"
/>
</div>
<div class="flex gap-4 justify-around w-full">
<label for="Position">Position</label>
<select required="true" id="position" required={true}>
<option value="Trainee">Trainee</option>
<option value="Doctor">Doctor </option>
<option value="Nurse">Nurse </option>
<option value="Ward Manager">Ward Manager </option>
<option value="Managment">Managment</option>
<option value="Head of Department">Head of Department</option>
<option value="Helper">Helper</option>
<option value="IT Department">IT Department</option>
</select>
</div>
<div class="flex gap-4 justify-around w-full">
<label for="Password">Password</label>
<input required="true" id="password" type="password" placeholder="Password" />
</div>
<div class="flex gap-4 justify-around w-full">
<label for="Confirm password">Confirm Password</label>
<input
required="true"
id="confirmPassword"
type="password"
placeholder="Confirm Password"
/>
</div>
<button type="submit"> Create User </button>
<button type="reset"> Clear All </button>
<div></div>
<client>
<script is:inline>
const id_name = document.getElementById("name");
const id_username = document.getElementById("username");
const id_email = document.getElementById("email");
const id_memberID = document.getElementById("memberID");
const id_position = document.getElementById("position");
const id_password = document.getElementById("password");
const id_confirmPassword = document.getElementById("confirmPassword");
const userForm = document.getElementById("RegisterForm");
const inputs = [
id_name,
id_username,
id_email,
id_memberID,
id_position,
id_password,
id_confirmPassword,
];
let name = " ";
let username = " ";
let email = " ";
let memberID = " ";
let position = " ";
let password = " ";
let confirmPassword = " ";
inputs.forEach((input, index) => {
input.addEventListener("input", (event) => {
switch (index) {
case 0:
name = event.target.value;
console.log(index, event.target.value);
break;
case 1:
username = event.target.value;
console.log(index, event.target.value);
break;
case 2:
email = event.target.value;
console.log(index, event.target.value);
break;
case 3:
memberID = event.target.value;
console.log(index, event.target.value);
break;
case 4:
position = event.target.value;
console.log(index, event.target.value);
break;
case 5:
password = event.target.value;
console.log(index, event.target.value);
break;
case 6:
confirmPassword = event.target.value;
console.log(index, event.target.value);
break;
default:
console.log("invalid id index", index);
}
});
});
userForm.addEventListener("submit", async (event) => {
event.preventDefault();
try {
const formData = new FormData(userForm);
console.log(JSON.stringify(formData));
const response = await fetch("/api/newUser.json", {
headers: {
"Content-Type": "application/x-www-form-urlencoded",
},
method: "POST",
body: formData,
});
const result = await response.json();
if (response.ok) {
alert(`User created successfully as ${formData.get("username")}`);
} else {
console.error("Submission failed", result.message);
}
} catch (error) {
console.log(error);
}
});
</script>
</client>
while this is the APi code
CODE
import turso from "../../lib/tursodb";
import fetchID from "./fetchID";
export const POST = async ({ request }) =\> {
const id = null
async function newid() {
id = await fetchID('users')
id = parseInt(id) + 1;
}
console.log(id)
try {
const formData = await request.formData();
const name = formData.get("name");
const username = formData.get("username");
const email = formData.get("email");
const position = formData.get("position");
const passwordhash = formData.get("passwordhash");
await turso.execute(
`INSERT INTO users (id, name, username, email, position, passwordhash) VALUES (?, ?, ?, ?, ?, ?)`,
[id, name, username, email, position, passwordhash]
);
return new Response(JSON.stringify({ message: "Success!" }), { status: 200 });
} catch (error) {
console.error("Error inserting data:", error);
return new Response(JSON.stringify({ message: "Error occurred" }), { status: 400 });
}
};
i
i have not yet applied for password hashing will do when sql Insert works
also if iam running the query directly from index.astro it inserts data dont know why its not happening with the api call
Vollständiger Original-Bericht
Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.
SOCIAL SHARE CARD GENERATOR