John Davidson

Sending data to a php file from reactJS with axios

0 comments
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:

Register


this.handleFormSubmit(event)}>
this.setState({ email: e.target.value })} required />
this.setState({ password: e.target.value })} required />
this.setState({ confirmPassword: e.target.value })} required />



);
}
}
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.

Rate this post

4 of 5 based on 4512 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us