This is my front end, where I use Formik to create a form and get input from the user.
import React from 'react'
import {Formik, Form, Field, ErrorMessage} from "formik"
import axios from "axios";
import * as Yup from "yup";
import { useNavigate } from 'react-router-dom';
function PatientRegistration() {
let navigate = useNavigate();
const initialValues = {
patient_email: "",
first_name: "",
last_name: "",
streetname: "",
city: "",
state: "",
zipcode: "",
sex: "",
gender: "",
age: "",
date_of_birth: "",
phone_number: "",
profession: "",
card_number: "",
expiration_date: "",
insurance_name: "",
policy_num: "",
group_num: "",
copay: "",
pharmacy_name: "",
pharmacy_streetname: "",
pharmacy_city: "",
pharmacy_state: "",
pharmacy_zipcode: ""
};
const validationSchema = Yup.object().shape({
patient_email: Yup.string().email().required("Must enter an email!"),
first_name: Yup.string().required("Must enter your first name!"),
last_name: Yup.string().required("Must enter your last name!"),
streetname: Yup.string().required("Must enter the street name of your home address!"),
city: Yup.string().required("Must enter the city of your home address"),
state: Yup.string().required("Must enter the state of your home address"),
zipcode: Yup.string().required("Must enter the zipcode of your home address"),
sex: Yup.string().required("Must enter your sex!"),
gender: Yup.string().required("Must enter your gender!"),
age: Yup.string().required("Must enter your age!"),
date_of_birth: Yup.string().required("Must enter your date of birth"),
phone_number: Yup.string().required("Must enter your phone number!"),
profession: Yup.string().required("Must enter your profession!"),
card_number: Yup.string().required("Must enter your credit card number!"),
expiration_date: Yup.string().required("Must enter your card's expiration date!"),
insurance_name: Yup.string().required("Must enter the insurance company you use!"),
policy_num: Yup.string().required("Must enter the policy number!"),
group_num: Yup.string().required("Must enter the group number!"),
copay: Yup.string().required("Must enter the copay amount"),
pharmacy_name: Yup.string().required("Must enter the pharmacy name!"),
pharmacy_streetname: Yup.string().required("Must enter the street name of your pharmacy!"),
pharmacy_city: Yup.string().required("Must enter the city of your pharmacy!"),
pharmacy_state: Yup.string().required("Must enter the state of your pharmacy!"),
pharmacy_zipcode: Yup.string().required("Must enter the zipcode of your pharmacy!")
});
const onSubmit = (data) => {
axios.post("http://localhost:3001/register/patient", data, {
headers: {
accessToken: sessionStorage.getItem("accessToken")
}
}).then((response) => {
if(response.data.error) {
console.log("Failed to create Patient Profile");
console.log(response.data.error);
alert(response.data.error);
} else {
console.log(typeof data.copay);
console.log("Successfully created Patient Profile");
alert("Successfully created Patient Profile");
//navigate("/doctor/home");
}
});
};
return (
<div className="PatientRegistrationPage">
<h1>Register Your Information:</h1>
<br />
<Formik initialValues={initialValues} onSubmit={onSubmit} validationSchema={validationSchema}>
<Form>
<label>Email: </label>
<ErrorMessage name="patient_email" component="span"/>
<Field autoComplete="off" id="patient_email" name="patient_email" placeholder="(Ex. johnsmith@gmail.com...)" />
<label>First Name: </label>
<ErrorMessage name="first_name" component="span"/>
<Field autoComplete="off" id="first_name" name="first_name" placeholder="(Ex. John...)"/>
<label>Last Name: </label>
<ErrorMessage name="last_name" component="span"/>
<Field autoComplete="off" id="last_name" name="last_name" placeholder="(Ex. Smith...)"/>
<br />
<br />
<label>Home Street Name: </label>
<ErrorMessage name="streetname" component="span"/>
<Field autoComplete="off" id="streetname" name="streetname" placeholder="(Ex. 100 James St.)"/>
<label>Home City: </label>
<ErrorMessage name="city" component="span"/>
<Field autoComplete="off" id="city" name="city" placeholder="(Ex. Brooklyn...)"/>
<label>Home State: </label>
<ErrorMessage name="state" component="span"/>
<Field autoComplete="off" id="state" name="state" placeholder="(Ex. New York...)"/>
<label>Home ZipCode: </label>
<ErrorMessage name="zipcode" component="span"/>
<Field autoComplete="off" id="zipcode" name="zipcode" placeholder="(Ex. 11201...)"/>
<br />
<br />
<label>Sex: </label>
<ErrorMessage name="sex" component="span"/>
<Field autoComplete="off" id="sex" name="sex" placeholder="(Ex. Male...)"/>
<label>Gender: </label>
<ErrorMessage name="gender" component="span"/>
<Field autoComplete="off" id="gender" name="gender" placeholder="(Ex. Masculine...)"/>
<label>Age: </label>
<ErrorMessage name="age" component="span"/>
<Field autoComplete="off" id="age" name="age" placeholder="(Ex. 34)"/>
<label>Date of Birth: </label>
<ErrorMessage name="date_of_birth" component="span"/>
<Field autoComplete="off" id="date_of_birth" name="date_of_birth" placeholder="(Format: YYYY-MM-DD)"/>
<label>Phone Number: </label>
<ErrorMessage name="phone_number" component="span"/>
<Field autoComplete="off" id="phone_number" name="phone_number" placeholder="(Format: XXX-XXX-XXXX)"/>
<label>Profession: </label>
<ErrorMessage name="profession" component="span"/>
<Field autoComplete="off" id="profession" name="profession" placeholder="(Ex. Doctor)"/>
<br />
<br />
<label>Card Number: </label>
<ErrorMessage name="card_number" component="span"/>
<Field autoComplete="off" id="card_number" name="card_number" placeholder="(Format: XXXXXXXXXXXXXXXX)"/>
<label>Expiration Date: </label>
<ErrorMessage name="expiration_date" component="span"/>
<Field autoComplete="off" id="expiration_date" name="expiration_date" placeholder="(Format: YYYY-MM-DD)"/>
<br />
<br />
<label>Insurance Name: </label>
<ErrorMessage name="insurance_name" component="span"/>
<Field autoComplete="off" id="insurance_name" name="insurance_name" placeholder="(Ex. United Healthcare)"/>
<label>Policy Number: </label>
<ErrorMessage name="policy_num" component="span"/>
<Field autoComplete="off" id="policy_num" name="policy_num" placeholder="(Fotmat: XXX-XXXX-XXXX)"/>
<label>Group Number: </label>
<ErrorMessage name="group_num" component="span"/>
<Field autoComplete="off" id="group_num" name="group_num" placeholder="(Ex. 123456)"/>
<label>Copay: </label>
<ErrorMessage name="copay" component="span"/>
<Field autoComplete="off" id="copay" name="copay" placeholder="(Format: 34.56)"/>
<br />
<br />
<label>Pharmacy Name: </label>
<ErrorMessage name="pharmacy_name" component="span"/>
<Field autoComplete="off" id="pharmacy_name" name="pharmacy_name" placeholder="(Ex. CVS)"/>
<label>Pharmacy Street Name: </label>
<ErrorMessage name="pharmacy_streetname" component="span"/>
<Field autoComplete="off" id="pharmacy_streetname" name="pharmacy_streetname" placeholder="(Ex. 200 James St.)"/>
<label>Pharmacy City: </label>
<ErrorMessage name="pharmacy_city" component="span"/>
<Field autoComplete="off" id="pharmacy_city" name="pharmacy_city" placeholder="(Ex. Brooklyn...)"/>
<label>Pharmacy State: </label>
<ErrorMessage name="pharmacy_state" component="span"/>
<Field autoComplete="off" id="pharmacy_state" name="pharmacy_state" placeholder="(Ex. New York...)"/>
<label>Pharmacy ZipCode: </label>
<ErrorMessage name="pharmacy_zipcode" component="span"/>
<Field autoComplete="off" id="pharmacy_zipcode" name="pharmacy_zipcode" placeholder="(Ex. 11201...)"/>
<br />
<br />
<button type="submit">Create Profile</button>
</Form>
</Formik>
</div>
)
}
export default PatientRegistration
Here is the route I use to get the data from the front end and input it into my database. Register.js (route)
const express = require('express');
const router = express.Router();
const Doctor = require('../models/Doctor.js');
const Patient = require('../models/Patient.js');
const { validateToken } = require("../middleware/auth.js");
const bcrypt = require('bcrypt');
router.post("/", async (req, res) => {
const {doctor_email, first_name, last_name, passcode, phone_number, office_streetname, office_city, office_state, office_zipcode} = req.body;
bcrypt.hash(passcode, 10).then((hash) => {
const info = [doctor_email, first_name, last_name, hash, phone_number, office_streetname, office_city, office_state, office_zipcode];
const theDoctor = new Doctor();
theDoctor.insert(info);
res.send("Sucessfully created doctor profile");
});
});
router.post('/patient', validateToken, async (req, res) => {
// console.log(req.body);
const patientData = req.body;
const thePatient = new Patient();
thePatient.insert(patientData);
res.send("Successfully created patient profile!");
});
module.exports = router;
Patient.js (model - file where I make the SQL query to input data into the database)
const db = require('../connection');
module.exports = class Patient {
constructor(newPatient) {
if (newPatient != null) {
this.patient_email = newPatient.patient_email;
this.first_name = newPatient.first_name;
this.last_name = newPatient.last_name;
this.streetname = newPatient.streetname;
this.city = newPatient.city;
this.state = newPatient.state;
this.zipcode = newPatient.zipcode;
this.sex = newPatient.sex;
this.gender = newPatient.gender;
this.age = newPatient.age;
this.date_of_birth = newPatient.date_of_birth;
this.phone_number = newPatient.phone_number;
this.card_number = newPatient.card_number;
this.expiration_date = newPatient.expiration_date;
this.insurance_name = newPatient.insurance_name;
this.policy_num = newPatient.policy_num;
this.group_num = newPatient.group_num;
this.copay = newPatient.copay;
this.pharmacy_name = newPatient.pharmacy_name;
this.pharmacy_streetname = newPatient.streetname;
this.pharmacy_city = newPatient.pharmacy_city;
this.pharmacy_state = newPatient.pharmacy_state;
this.pharmacy_zipcode = newPatient.pharmacy_zipcode;
}
}
insert(values) {
const sql = "INSERT INTO Patient VALUES (?);";
console.log(values);
console.log(Object.keys(values).length);
db.query(sql, [values], (err, result) => {
if (err) {
// console.log(values);
throw err;
}
console.log(result);
console.log("Insert Success");
});
}
The picture attached to this post shows what my database looks like after I click the Create Profile button on the front end.
Here is the input I had for the form: { patient_email: 's8@g', first_name: 's@g', last_name: 's@g', streetname: 's@g', city: 's@g', state: 's@g', zipcode: 's@g', sex: 's@g', gender: 's@g', age: 's@g', date_of_birth: 's@g', phone_number: 's@g', profession: 's@g', card_number: 's@g', expiration_date: 's@g', insurance_name: 's@g', policy_num: 's@g', group_num: 's@g', copay: '$9', pharmacy_name: 's@g', pharmacy_streetname: 's@g', pharmacy_city: 's@g', pharmacy_state: 's@g', pharmacy_zipcode: 's@g' }
Any guidance or help would be greatly appreciated. If you need more info or have any questions, lmk and i'll try to respond as soon as I can.
I tried searching this problem up online and seeing if anyone dealt with this issue already; however, I got nothing so far. I saw this one post for a user who used php instead of express.js for their backend: Form submited with php stores 0s. I looked through it; however, I am not sure how I can apply the solution to their problem to my project.
I think there's an issue with the 'const sql = "INSERT INTO Patient VALUES (?)'. Instead of that, can you try passing in an object with key value pairs for the parameterized query, and then set the SQL as 'INSERT INTO Patient SET ?', with the object as the second argument to db.query? I'd also recommend console.logging the SQL that is being generated before the query is sent out.