PHP React form formData 30: input text textarea radio using ajax (fetch)
Tags: php, react, form, fetch
Published: 2019-12-19 00:22:02

<hr />

<center>Happy Coding</center>

<hr />

{% replit @antelove19/PHP-React-form-formData-30 %}

Right now, PHP and React, the series .. 

Add external script in head tag.
First and second for <b>react</b>, and third for <b>babel</b>.

```php
<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>
```

In body, add div tag with id="myApp" for render DOM React

```php
<div id="myApp"></div>
```

Script React

```php
<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

```php
        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)

```php
        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

```php
        render() {

            return (

                <div>

                    <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 />

                        Description: <textarea name="description" rows="10" cols="50" onChange={this.handleChange} ></textarea>
                        <br />

                        Gender:
                        <input type="radio" name="gender" value="male" onChange={this.handleChange} /> Male
                        <input type="radio" name="gender" value="female" onChange={this.handleChange} /> Female
                        <br />

                        <hr />

                        <input type="submit" value="Submit" />

                    </form>
```

and get input data into p tag

```php
                    <h3>Model</h3>

                    <p>Firstname: { this.state.firstname }</p>
                    <p>Lastname: { this.state.lastname }</p>

                    <p>Description: { this.state.description }</p>

                    <p>Gender: { this.state.gender }</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

```php
    echo json_encode($_POST);
```

<hr/>

<center>Thank for reading :)</center>

<hr/>