Dj Techblog

A blog on web development

Submit a react form to php server using jquery

Last modified on July 10, 2022

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.

react-integration-with-php-server-using-jquery

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();
    ?>
landing page form

Published on 10 July, 2022


Ad section

Intro

Debabratta Jena

I mainly write about HTML5, CSS3, Javascript, Angular JS, Ajax, PHP, Mysql, On page SEO, Google Ads, Tag manager, Universal Analytics, Google My Business, SERP, Apache server configuration etc, Yoga is my passion.

Reach to me in the contact us form below

Follow me on

Contact us

Subscribe

Tags

Php HTML5 Javascript CSS Ajax Angular JS Google My bisiness Listing Google tag Manager Google Universal Analytics Search Engine Optimization On page SEO Off page SEO Google Marketing platform Digital Marketing Google Ads Mysql Apache Server

Ad section
×

Subscribe to get email notification about our new post

Name

Email

We neither sell nor share your personal information with any third party. Your identity is safe with us.