As of now, I'm successfully inserting information into the database (SQL, phpMyAdmin) via Home.js
but the problem is that every time the user enters information & hits submit
, it gets redirected to my demo.php
file instead of Next.js
.
In other words, how can I make it so that upon the user information successfully entering the database and go to the next page? (Next.js
)?
I know <form action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data">
will inevitably take me to demo.php
but if I don't use this, then nothing gets submitted to my db.
What am I doing wrong and how can I fix this?
Here's Home.js
:
import React, { Component } from 'react';
import Next from '../Home/Next';
class Home extends Component {
constructor(props) {
super(props);
this.state = {
show: false
};
this.getPHP = this.getPHP.bind(this);
}
getPHP(e) {
this.setState({show: true});
let formData = new FormData();
fetch(`http://localhost/demo_react/api/demo.php`, {
method: 'POST',
body: formData
}).then(res => res.json())
.then(response => {
console.log('response');
console.log(response);
e.preventDefault();
});
}
render() {
const goNext = this.state.show;
if(goNext) {
return <Next/>;
}
return (
<div>
<form action="http://localhost/demo_react/api/demo.php" method={"POST"} encType="multipart/form-data">
<div className="form-group">
<label htmlFor="username">Email</label>
<input className="form-control" type="text" name="username"/>
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input className="form-control" type="password" name="password"/>
</div>
<input className="btn btn-primary" type="submit" value="Login" onSubmit={e => this.getPHP(e)} name={"submit"}/>
</form>
</div>
);
}
}
export default Home;
Here's demo.php
:
$connection = mysqli_connect("localhost", "root", "", "loginapp");
$username = $_POST['username'];
$password = $_POST['password'];
if(isset($_POST['submit'])) {
$query = "INSERT INTO users(username, password) ";
$query .= " VALUES('$username', '$password')";
$result = mysqli_query($connection, $query);
if (!$result) {
die("Query failed" . mysqli_error($connection));
} else {
echo "check database";
}
}
Do not use a type="submit" button. Use a type="button" or a <button>. If your form didn't have a submit, the problem is solved.
Obviously, in your JS code you need to send the information. You can collect it and send to demo.php without triggering form submit. I'll show you a basic example for doing it.
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
var user = (document.getElementById(form).username) ? encodeURIComponent(document.getElementById(form).username.value) : '';
var pass = (document.getElementById(form).password) ? encodeURIComponent(document.getElementById(form).password.value) : '';
var data = 'username=' + user + '&password=' + pass;
request.open('POST', document.getElementById(form).action, false);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset:UTF-8");
request.setRequestHeader("Content-length", data.length);
request.send(data);
if (request.status == 200) {
alert('Send OK.');
} else {
alert('Send error.');
}
The included snippet get the URL to send information from the form action itself. You can optimize the code a lot probably, but it's a starting point. This code uses plain JS, you can change it to jQuery for example (jQuery version its shorter for example).
Also, if you need to eventually do a redirect, use a JS redirect instead.