Unable to retrieve POST values in php when submitting react/redux form

Question

I am building a React + Redux app using PHP as backend. I have a simple login form like so:

import React, {Component} from 'react';
import {reduxForm} from 'redux-form';
import {loginUser} from '../actions/index';

class LoginForm extends Component {

    render() {
        const {fields: {username, password}, handleSubmit} = this.props;
        return (
            <form onSubmit={handleSubmit(this.props.loginUser)}>
                <input
                    type="string"
                    placeholder="username"
                    {...username}
                />
                <input
                    type="password"
                    placeholder="password"
                    {...password}
                />
                <input
                    type="submit"
                />
            </form>
        );
    }
}

export default reduxForm({
    form: 'Login',
    fields:['username', 'password']
}, null, {loginUser})(LoginForm);

I am using redux-form to manage the form data handling. I use loginForm (an action creator) to post the data to the php backend like so:

export function loginUser(props) {
    console.log('props', props);
    const request = axios.post(LOGIN_PAGE, props);
    return {
        type: LOGIN_USER,
        payload: request
    }
}

The console.log correctly displays all the data from the login form.

Here is my PHP backend:

if (!is_user_logged_in()) {
    $username = $_POST['username'];
    $username = $username . 'test';
    $password = $_GET['password'];
    $response = array(
        'username' => $username
    );
    wp_send_json($response);
}

Here is the relevant reducer:

export default function(state = INITIAL_STATE, action) {
    switch(action.type) {
        case LOGIN_USER:
            console.log('reducer', action.payload.data);
            return {
                ...state,
                statusCode:action.payload.data,
                user:action.payload.data
            }
    }
    return state;
}

When I log action.payload.data, I get {username: 'test'}, thus indicating that my backend is not getting data from my form. I.e. If I type the username as abc, I should get back abctest, as opposed to test.

Where am I going wrong?

score 3 · Accepted Answer · answered Jan 18 '17 at 16:38

I completely forgot about this question!

The form is sending JSON to the backend, here is how to retrieve it:

$inputJSON = file_get_contents('php://input');
$input = json_decode( $inputJSON, TRUE ); //convert JSON into array
$username = $input['username'];

score 1 · Answer 2 · answered Sep 01 '16 at 23:31

1

It seems that method GET is used for form submission. That's why $_POST['username'] results in null. So you should use the method POST and fetch password from $_POST['password'] instead of $_GET['password'] as well.

answered Sep 01 '16 at 23:31

Andrej

7,474
1
19
21

I am not sure I follow, I added `method="POST"` to my form, and changed `$_GET['password']` to `$_POST['password']`, but I still have the same problem. – Frosty619 Sep 01 '16 at 23:45
Can you post var_dump($_REQUEST); after form submission? @Frosty619 – Andrej Sep 01 '16 at 23:48
I did, I get back an empty array, which is really confusing because `LOGIN_PAGE` is the correct URL. – Frosty619 Sep 01 '16 at 23:57

score 0 · Answer 3 · edited May 23 '17 at 12:09

0

may be How to retrieve Request Payload will help you to retrieve the values submitted frim react in PHP.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 18 '17 at 05:05

bipeen

13
1
6

Unable to retrieve POST values in php when submitting react/redux form

3 Answers3