John Davidson

Message:

I have a website in reactJS and I want to let my user to register in my site, so i have the code:

import React from 'react'

import axios from 'axios'

import './Style/button.css'



class Register extends React.Component {

    constructor(props) {

        super(props);

        this.state = {

            email: '',

            password: '',

            confirmPassword: ''

        }

    }



    handleFormSubmit(event) {

        event.preventDefault();



        let formData = new FormData();

        formData.append('email', this.state.email)

        formData.append('password', this.state.password)



        console.log(formData);

        axios({

            method: 'post',

            url: './api/contact/contact.php',

            data: formData,

            config: { headers: { 'Content-Type': 'multipart/form-data' } }

        })

            .then(function (response) {

                //handle success

                console.log(response)



            })

            .catch(function (response) {

                //handle error

                console.log(response)

            });

    }



    render() {

        return (

            <form className="formulaire">

                <fieldset>

                    <legend> Register : </legend>

                    <p>Mail adress :</p>

                    <input type="text" placeholder="Mail" name="email" value={this.state.email} onChange={e => this.setState({ email: e.target.value })}></input>

                    <br />

                    <p>Choose a password :</p>

                    <input type="password" placeholder="password" name="password" value={this.state.password} onChange={e => this.setState({ password: e.target.value })}></input>

                    <br />

                    <p>Confirm your password :</p>

                    <input type="password" placeholder=" confirm password" name="confirmPassword" value={this.state.confirmPassword} onChange={e => this.setState({ confirmPassword: e.target.value })}></input>

                    <br /><br /><br /><br />

                    <input className="button" type="submit" onClick={e => this.handleFormSubmit(e)} value="Sign up" />

                </fieldset>

            </form>

        );

    }

}



export default Register;

When i want to send the information with axios to my php file :

<?php

$host = "localhost";

$user = "root";

$password = "azertyuiop3104";

$dbname = "reactdb";

$id = '';



$con = mysqli_connect($host, $user, $password, $dbname);



$method = $_SERVER['REQUEST_METHOD'];

$request = explode('/', trim($_SERVER['PATH_INFO'], '/'));





if (!$con) {

  die("Connection failed: " . mysqli_connect_error());

}





switch ($method) {

  case 'GET':

    break;

  case 'POST':

    $email = $_POST["email"];

    $password = $_POST["password"];



    $sql = "insert into user (username, password) values ('$email', '$password')";

    break;

}



// run SQL statement

$result = mysqli_query($con, $sql);



// die if SQL statement failed

if (!$result) {

  http_response_code(404);

  die(mysqli_error($con));

}



if ($method == 'POST') {

  echo json_encode($result);

} else {

  echo mysqli_affected_rows($con);

}



$con->close();

My request fail :

my file register.js (first code) is in a src/ directory and my contact.php (second code) is in src/api/contact/ directory

I don't know how to fix that, if any one can help me ?

---

My Answer:

);
}
}
export default Register;
In this code, we have a Register component that contains a form with input fields for email, password, and confirm password. When the form is submitted, the handleFormSubmit function is called, which prevents the default form submission behavior, creates a FormData object with the email and password values, and sends a POST request to the specified PHP file using axios.
Make sure to replace './api/contact/contact.php' with the correct path to your PHP file that will handle the registration process. Also, ensure that your PHP file is set up to receive and process the data sent from the React component.