How to Submit Form Data without Page Load in Shopify Remix App?

How to Submit Form Data without Page Load in Shopify Remix App

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!

Previous Article

Magento 2: How to Override Template using Helper Function

Next Article

Exploring useRevalidator and useRouteError Hooks in Remix

Write a Comment

Leave a Comment

Your email address will not be published. Required fields are marked *

Get Connect With Us

Subscribe to our email newsletter to get the latest posts delivered right to your email.
Pure inspiration, zero spam ✨