My code is working fine on my laptop browser but not submitting the form on mobile browser.
import { useEffect, useState } from "react";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import { uri } from "../constants/url";
import { ImageCard } from "./UI";
const Home = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [wapp, setWapp] = useState("");
const [dob, setDob] = useState("");
const [successAlert, setSuccessAlert] = useState(false);
const [warningAlert, setWarningAlert] = useState(false);
const [alertMsg, setAlertMsg] = useState("");
const [dim, setDim] = useState(false);
const [showCard, setShowCard] = useState(false);
const [qr, setQr] = useState("");
useEffect(() => {
let timer;
if (successAlert || warningAlert) {
timer = setTimeout(() => {
setDim(true);
setTimeout(() => {
setSuccessAlert(false);
setWarningAlert(false);
setAlertMsg("");
setDim(false);
}, 2000);
}, 4000);
}
return () => clearTimeout(timer);
}, [successAlert, warningAlert]);
useEffect(() => {
if (qr !== "") {
setShowCard(true);
}
}, [qr]);
const handleSubmit = async (e) => {
e.preventDefault();
if (validateForm()) {
const data = {
name,
email,
wapp,
dob,
};
try {
let response = await axios.post(uri + "sendWifiPassword", data);
const qrCode = response.data;
if (qrCode) {
setQr(qrCode);
setShowCard(true);
}
} catch (error) {
console.error("Error:", error);
}
}
};
const validateForm = () => {
if (name === "") {
setAlertMsg("Please provide you Full Name");
setWarningAlert(true);
return false;
}
if (email === "" && wapp === "") {
setAlertMsg("Please fill out either Email address or WhatsApp number");
setWarningAlert(true);
return false;
}
if (wapp !== "" && !/03d{9}/.test(wapp)) {
setAlertMsg("Please provide valid Number. Eg: 03125671234");
setWarningAlert(true);
return false;
}
return true;
};
console.log(showCard, qr);
return (
<div>
<nav className="navbar bg-body-tertiary">
<div className="container-fluid">
<a className="navbar-brand">Wifi Demo</a>
<a href="/admin" className="btn btn-warning">
Admin
</a>
</div>
</nav>
<div className="d-flex justify-content-center">
<div className="col-md-6 col-lg-2">
{successAlert && (
<div
id="successAlert"
className="alert alert-success"
style={{ opacity: dim ? 0.5 : 1 }}
>
{alertMsg}
</div>
)}
{warningAlert && (
<div
id="warningAlert"
className="alert alert-warning"
style={{ opacity: dim ? 0.5 : 1 }}
>
{alertMsg}
</div>
)}
</div>
</div>
{showCard ? (
<ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />
) : (
<div id="formContainer">
<div className="d-flex justify-content-center">
<a>Please fill the form below to get Wifi Password</a>
</div>
<div className="d-flex justify-content-center">
<div className="col-md-6 col-lg-2">
<form id="userForm" onSubmit={handleSubmit}>
<div className="mb-3">
<label htmlFor="name" className="form-label">
Full Name
</label>
<input
type="text"
className="form-control"
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="email" className="form-label">
Email address
</label>
<input
type="email"
className="form-control"
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="wapp" className="form-label">
Whats App #
</label>
<input
type="text"
className="form-control"
id="wapp"
value={wapp}
onChange={(e) => setWapp(e.target.value)}
/>
</div>
<div className="mb-3">
<label htmlFor="dob" className="form-label">
Date of Birth
</label>
<input
type="date"
className="form-control"
id="dob"
value={dob}
onChange={(e) => setDob(e.target.value)}
/>
</div>
<button type="submit" className="btn btn-warning">
Submit
</button>
</form>
</div>
</div>
</div>
)}
</div>
);
}
export default Home;
I’ve tried changing background color to check where the problem. I’ve condition in handleSubmit() to check if (qr) exists then proceed, if I set background color to red here, it will change on web browser but not on mobile browser,
const handleSubmit = async (e) => {
e.preventDefault();
if (validateForm()) {
const data = {
name,
email,
wapp,
dob,
};
try {
let response = await axios.post(uri + "sendWifiPassword", data);
const qrCode = response.data;
if (qrCode) {
setQr(qrCode);
setShowCard(true);
}
} catch (error) {
console.error("Error:", error);
}
}
};
NOTE: I’ve manually copied the image data from log and provided it in the following component and it works fine on both laptop and mobile browser:
<ImageCard imgSrc={qr} setQr={setQr} showCard={showCard} setShowCard={setShowCard} />
I’ve setup CORS in Back End and I’m sending req on my local network not local host (i.e, http://{my_ip_address}:5000) and its working on both browsers:
app.use(cors({
origin: '*',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
headers: ['Content-Type', 'Authorization']
}));