I have a react app that sends input data to astradb and hosted on firebase domains, i'm using a rest api, the post method works on localhost:3000 and the firebase domain on my computer/network but when i try to submit my form on an iphone or another macbook, the submit button does not work
Ive tried to see it there are any permission problems with datastax/astradb or firebase and i cannot seem to find a good answer.
Ive tried on android phones also, still no response from the submit button
Since i cannot inspect the page on a phone with chrome, i really cant see the errors coming back on the console or network, can anyone please help me
This is my ContactForm.js
import { Checkbox, useCheckboxState } from "pretty-checkbox-react"
import React, { useRef, useState } from "react"
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import emailjs from "@emailjs/browser"
const ContactForm = () => {
const navigate = useNavigate()
const [permission, setPermission] = useState(null)
// const form = useRef()
const [formData, setFormData] = useState({
datetime: new Date().toISOString(),
fName: "",
lName: "",
email: "",
zipCode: "",
phoneNumber: "",
services: [],
})
const serviceData = [
"Business Development",
"Brand Creation",
"Logo Design",
"Digital Marketing/Ads",
"Video/Photography",
"Social Media/Content",
"Web Development",
]
const handleSubmit = async (e) => {
//dont refresh
e.preventDefault()
//atra db
const response = await axios.post("http://localhost:8000/customers", {
formData,
})
const success = response.status === 200
if (success) {
console.log("post was successful")
navigate("/exitpage")
}
//clear fromData
setFormData({
datetime: "",
fName: "",
lName: "",
email: "",
zipCode: "",
PhoneNumber: "",
services: [],
})
//clear checkboxes
setPermission(false)
}
const handleChange = (e) => {
const value = e.target.value
const name = e.target.name
setFormData((prevState) => ({
...prevState,
[name]: value,
}))
}
console.log(formData)
return (
<div className="contact-form">
<div className="container">
<div className="row">
<form validate autocomplete="on" onSubmit={handleSubmit}>
<div className="col">
<input
type="text"
value={formData.fName}
placeholder="first name"
name="fName"
onChange={handleChange}
required={true}
/>
<input
type="text"
value={formData.lName}
placeholder="last name"
name="lName"
onChange={handleChange}
required={true}
/>
</div>
<div className="col">
<input
type="email"
value={formData.email}
placeholder="example@email.com"
name="email"
onChange={handleChange}
required={true}
/>
</div>
<div className="col">
<input
type="number"
value={formData.zipCode}
placeholder="e.g. 66801"
name="zipCode"
onChange={handleChange}
required={true}
/>
</div>
<div className="col">
<input
type="tel"
value={formData.phoneNumber}
placeholder="e.g. 6203341100"
name="phoneNumber"
onChange={handleChange}
required={true}
/>
</div>
<fieldset>
<legend>
<h1>Please Select Services:</h1>
</legend>
{serviceData.map((data) => (
<div className="col">
<label>
<Checkbox
style={{}}
color="success"
className="service"
animation="rotate"
checked={permission}
plain
icon={<i className="mdi mdi-close" />}
value={data}
name="services"
onChange={(e) => {
if (!formData.services.includes(e.target.value)) {
setFormData({
...formData,
services: formData.services.concat(e.target.value),
})
} else {
setFormData({
...formData,
services: formData.services.filter(
(item) => item != e.target.value
),
})
}
}}
>
{data}
</Checkbox>
</label>
</div>
))}
</fieldset>
<button
type="submit"
className="col submit buy-btn"
onClick={handleSubmit}
>
Submit
</button>
</form>
</div>
</div>
</div>
)
}
export default ContactForm
this is my server.js post method for the contact form
const PORT = process.env.PORT || 8000
const express = require("express")
const cors = require("cors")
require("dotenv").config()
const axios = require("axios")
const app = express()
app.use(cors())
app.use(express.json())
const url = process.env.URL
const token = process.env.ASTRA_DB_TOKEN
//create customer
app.post("/customers", async (req, res) => {
const formData = req.body.formData
const options = {
method: "POST",
headers: {
Accepts: "application/json",
"X-Cassandra-Token": token,
"Content-Type": "application/json",
},
data: formData,
}
try {
const response = await axios(url, options)
res.status(200).json(response.data)
} catch (e) {
console.error(e)
res.status(500).json({ message: e })
}
})
also using node v16.1.0
