We will integrate React app with php server to submit the form using jquery, the server running php receives the data processes and responds back to the react form.
In our previous articles we have seen how can we apply data validation to a react form using hooks. Now, we will see how we can submit the form using jquery. We can submit the react form using jquery exactly as we used to do in html websites. Only thing we need is to install the required jquery library in the react app's root folder.
First of all I assume that you have already created the react app and next you want to build a form with data validation ON.
We will create a file called Form.js in the /src directory and import this in our App.js file. Our App.js will look like this.
Dependencies: For this Form to run you need to install Bootstrap, Jquery, jquery validator.
Create your App.js file
To build the form I have used Bootstrap library which also you need to import in your App, if you have not installed bootstrap already, the form will not look good. Import the App.js file in your index.js file in order to successfully run the React app.
App.js
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container } from 'react-bootstrap';
import ReactForm from './ReactForm'
function App(){
return(
<>
<Container className='w-50 pt-5 border rounded bg-light pb-5 my-5'>
<ReactForm />
</Container>
</>
);
}
export default App;
Build ReactForm.js
Our next job is to build ReactForm.js in the same directory in which App.js is. We have imported all the necessary files to run the app.
Our react form contains two form fields Name and Email. We have applied our data validation on the the Submit button, that is when the button is clicked it checks for error and displays immediately below the input fields.
We have used four useState react hook here. Each one performs a specific operation. The setField function calls setForm which itself uses react hook to update the state. The setPass and setFail updates and displays the message from the php server on the react form respectively.
The onSubmit={handleSubmit} calls the handleSubmit function which checks for data validation if there is no error we can submit the form. The function findFormErrors checks for validation. The setField function updates the state of the field.
ReactForm.js
import {React, useState} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Button} from 'react-bootstrap';
import validator from 'validator';
import $ from 'jquery';
import { Form } from 'react-bootstrap';
function ReactForm(){
const [ fail, setFail] = useState("");
const [ pass, setPass] = useState("");
const [ form, setForm ] = useState({});
const [ errors, setErrors ] = useState({});
const setField = (field, value) => {
setForm({
...form,
[field]: value
})
if ( !!errors[field] ) setErrors({
...errors,
[field]: null
})
}
const findFormErrors = () => {
const { name, email } = form
const newErrors = {}
// name errors
if ( !name || name === '' ) newErrors.name = 'Please enter your full name.'
else if ( name.length > 30 ) newErrors.name = 'Name is too long!'
if ( !email || email === '' ) newErrors.email = 'Please enter your email.'
else if(!validator.isEmail(email)) newErrors.email = 'Please enter valid email.'
return newErrors
}
const handleSubmit = e => {
e.preventDefault()
// get our new errors
const newErrors = findFormErrors()
// Conditional logic:
if ( Object.keys(newErrors).length > 0 ) {
// We got errors!
setErrors(newErrors)
} else {
// No errors! Put any logic here for the form submission!
//setShow(false);
const form = $(e.target);
$.ajax({
type: "POST",
url: form.attr("action"),
data: form.serialize(),
dataType: "json",
success: function(response) {
if(response === 1){
$('.fail').hide();
$('.pass').show();
setPass("Email sent successfully.");
}
else{
$('.pass').hide();
$('.fail').show();
setFail("Email sent failed. Please try again.");
}
},
error: function(response){
$('.pass').hide();
$('.fail').show();
setFail("Error occured. Please try again.");
}
});
}
}
return(
<>
<Form method="post" id="form-id" action="email.php" onSubmit={handleSubmit}>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Name</Form.Label>
<Form.Control
type="text"
placeholder="Enter your full name"
name="name"
autoFocus
onChange={ e => setField('name', e.target.value) }
isInvalid={ !!errors.name }
/>
<Form.Control.Feedback type='invalid'>
{ errors.name }
</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3" controlId="exampleForm.ControlInput1">
<Form.Label>Email </Form.Label>
<Form.Control
type="text"
name="email"
placeholder="Enter your email"
onChange={ e => setField('email', e.target.value) }
isInvalid={ !!errors.email }
/>
<Form.Control.Feedback type='invalid'>
{ errors.email }
</Form.Control.Feedback>
</Form.Group>
<p className="text-danger fail">{ fail }</p>
<p className="text-success pass">{ pass }</p>
<Button variant="outline-primary" type='submit'>
Submit
</Button>
</Form>
</>
);
}
export default Reactform;
Build email.php
The email.php file will take the two inputs from react form, forwards the email and returns the response back to the react form. The react form depending on the output which we receive in the response variable displays the respective message in the form.
email.php
<?php
header('Access-Control-Allow-Origin: http://localhost:3000');
error_reporting(E_ALL & ~ E_NOTICE);
class Controller
{
function __construct()
{
$this->send();
}
function send()
{
//calculate the $logic here
if($logic){
echo 1;
}
else{
echo 0;
}
}
}
$controller = new Controller();
?>
Published on 10 July, 2022
