In this blog, we will learn how to submit form data without page load using the API method. You can submit form data by creating a function and you need to call that function on the submit button click event.
Steps to Submit Form Data without Page Load in Shopify Remix App:
Step 1: Create Form file
First, you need to create a form.jsx file in your app for handling form frontend code and you must handle all front data from here.
Here is a code example:
import { useState } from “react”;
import { useNavigate } from “@remix-run/react”;
import shopify from “../shopify.server”;
export default function SubmitForm() {
const [formData, setFormData] = useState({
name: “”,
email: “”,
message: “”,
});
const [errors, setErrors] = useState({});
const [isSubmitting, setIsSubmitting] = useState(false);
const navigate = useNavigate();
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
…prev,
[name]: value,
}));
};
const handleSubmit = async (e) => {
e.preventDefault();
setIsSubmitting(true);
try {
const response = await fetch(“/app/submit”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify(formData),
});
const result = await response.json();
if (!response.ok) {
setErrors(result.errors || {});
setIsSubmitting(false);
return;
}
} catch (error) {
console.error(“Submission failed”, error);
setErrors({ general: “An unexpected error occurred.” });
setIsSubmitting(false);
}
};
return (
<form onSubmit={handleSubmit}>
<label>
Name:
<input
type=”text”
name=”name”
value={formData.name}
onChange={handleChange}
/>
{errors.name && <span>{errors.name}</span>}
</label>
<label>
Email:
<input
type=”email”
name=”email”
value={formData.email}
onChange={handleChange}
/>
{errors.email && <span>{errors.email}</span>}
</label>
<label>
Message:
<textarea
name=”message”
value={formData.message}
onChange={handleChange}
/>
{errors.message && <span>{errors.message}</span>}
</label>
{errors.general && <p>{errors.general}</p>}
<button type=”submit” disabled={isSubmitting}>
{isSubmitting ? “Submitting…” : “Submit”}
</button>
</form>
);
}
Step 2: Create Submit file
After this, you need to create a submit.jsx file in your app for handling form backend code and you must handle all backend data from here.
Here is a code example :
import { json } from “@remix-run/node”;
export const action = async ({ request }) => {
const formData = await request.json();
const { name, email, message } = formData;
const errors = {};
if (!name) errors.name = “Name is required”;
if (!email) errors.email = “Email is required”;
if (!message) errors.message = “Message is required”;
if (Object.keys(errors).length) {
return json({ errors }, { status: 400 });
}
return json({ success: true });
};
Explanation
Using these two files you can submit form without page load. You can customize and also set submitted data in form again so manual refresh can’t loss data.
Conclusion:
In this blog, we learned how to submit form without page load in Shopify remix app. If you are submitting form without refresh event it may have many benefits for your app. Whether you’re building a Shopify app or any other Remix-based application, this approach can be adapted to meet your specific requirements.
For more insights into developing with Remix and Shopify, stay tuned to our blog!
