Falah Al Fitri
Posted on December 18, 2019
Right now, PHP and React, the series ..
Add external script in head tag.
First and second for react, and third for babel.
<head>
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
In body, add div tag with id="myApp" for render DOM React
<div id="myApp" ></div>
Script React
<script type="text/babel">
class App extends React.Component
{
constructor(props)
{
super(props);
this.state = {
result: {}
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event)
{
const target = event.target;
const name = target.name;
const value = target.value;
this.setState({
[name]: value
});
}
submit function with (this) object of form
handleSubmit(event)
{
event.preventDefault();
var formHTML = event.target;
console.log( formHTML ); // formHTML element
// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
var formData = new FormData( formHTML );
console.log( formData );
// https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
/* AJAX request */
this.ajax( formHTML, formData ); // ajax( form, data, destination = null )
}
This, ajax fetch (promise)
ajax( form, data, destination = null )
{
fetch( form.action, {
method: form.method, // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
// 'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
// "Content-Type": "multipart/form-data" // missing boundary
},
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // no-referrer, *client
body: data // body data type must match "Content-Type" header
} )
/* handle return result */
.then( response => {
if ( ! response.ok )
{
throw new Error(response.statusText);
}
return response.json();
} )
/* handle success */
.then( result => {
console.log( result );
this.setState( {result: result} );
} )
/* handle error */
.catch( error => {
console.error(error);
} );
}
render it
render() {
return (
<div>
This, Form HTML rendering
<form method="post" action="process.php" onSubmit={this.handleSubmit} >
Firstname: <input type="text" name="firstname" onChange={this.handleChange} />
<br />
Lastname: <input type="text" name="lastname" onChange={this.handleChange} />
<br />
<hr />
<input type="submit" name="submit" value="Submit" />
</form>
and get input data into p tag
<h3>Model</h3>
<p>Firstname: { this.state.firstname }</p>
<p>Lastname: { this.state.lastname }</p>
<hr /><br />
<h3>Result from server PHP</h3>
<pre>Submit Result: { JSON.stringify(this.state.result) }</pre>
</div>
);
}
}
ReactDOM.render( <App />, document.querySelector('#myApp') )
</script>
process.php
echo json_encode($_POST);
Last, don't forget press F12
Demo repl.it
💖 💪 🙅 🚩
Falah Al Fitri
Posted on December 18, 2019
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.