How to do POST in FORM Submit using reactjs and pass the object value into REST service?

Question

I have created a login page using reactjs, when I send my user input/password through a post method rest api call to authenticate I am receiving an error. Can somebody help me on whats going wrong here please!!

I guess this is because I am unable to send username and password strings in a json format.

This is the error,

<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>27</b><br />
<br />
<b>Notice</b>: Undefined variable: id in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
<br />
<b>Notice</b>: Undefined variable: error in <b>/var/www/html/app/Controllers/Hafka/HAFKAController.php</b> on line <b>29</b><br />
{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}

This is my app.js file,

    import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

export default class App extends Component {

    render() {
        return (
            <div className="App">
                <div className="App-header"></div>
                <form
                    id="main-login"
                    action="http://don.healthedata.com/admin/login"
                    method="post">
                    <h2>
                        Admin UI Login
                    </h2>
                    <label>
                        <span class="text">user:</span>
                        <input type="email" name="email"/><br/>
                    </label>
                    <br/>
                    <label>
                        <span class="text">password:</span>
                        <input type="password" name="password"/><br/>
                    </label><br/>
                    <div class="align-right">
                        <button type="submit">Submit</button>
                    </div>
                </form>

            </div>

        );
    }

}

Solution:
Modified and working App.js file:

import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';

export default class App extends Component {

    constructor(props, context) {
        super(props, context);

        this.state = { description: '' };
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        });
    }

    onSubmit(e) {
        e.preventDefault();

        fetch(this.props.formAction, {
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({description: this.state.description})
        });

        this.setState({description: ''});
    }

    render() {
        return (
            <div className="App">
                <form
                    id="main-login"
                    action={this.props.action}
                    method={this.props.method}
                    onSubmit={this.onSubmit}>
                    <h2>Admin UI Login</h2>
                    <label>
                        <span class="text">user:</span>
                        <input type="email" name="email"/><br/>
                    </label>
                    <br/>
                    <label>
                        <span class="text">password:</span>
                        <input type="password" name="password"/><br/>
                    </label>
                    <br/>
                    <div class="align-right">
                        <button>Submit</button>
                    </div>
                </form>
            </div>
        );
    }

}

// App.propTypes = { action: React.PropTypes.string.isRequired, method: React.PropTypes.string}
App.defaultProps = {
    action: 'http://don.healthedata.com/admin/login',
    method: 'post'
};

module.exports = App;

When I provide user input/password and hit submit, nothing is happening.

Mummer

i suggest going through the react tutorial first. facebook.github.io/react/docs/tutorial.html – Usurer

Please try to indent your code to make it more readable – Wilkins

@Wilkins I have already indented my code, please let me know what exactly you are referring to!! – Mummer

Answer 1

You're right, you are getting this error:

{"code":"INVALID_JSON_INPUT","message":"Error decoding JSON input"}

It means that you are not sending the data as JSON format. You need to process the information that you get from the form, create a JSON object and then send it through a POST request.

You can do that with the onSubmit property of the form. Handle the data from the form to a new function and then I suggest using fetch to send the POST

Wilkins

Change the submit button for an input with type submit ;) – Wilkins

Thanks @LuisPinto, you mean this <input type="submit" value="Submit"/> & <button type="submit">Submit</button>, it didn't work. I guess I have made some mistake in onSubmit(e) function, what say? – Mummer

Try to put some console.log on the onSubmit function to see what it isn't working. Maybe you are sending a bad request. At first sight you are not binding the function onSubmit, try to put this instead onSubmit={this.onSubmit.bind(this)} – Wilkins

Answer 2

First of all fetch the url in which u want to insert data.Here first create todoadd.js file:

 import fetch from 'isomorphic-fetch';

export function createBlogPost(data) {
return fetch('Your Rest url', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
        'Content-Type': 'application/json'
    }
}).then(response => {
    if (response.status >= 200 && response.status < 300) {
        return response;
        console.log(response);
        window.location.reload();
      } else {
       console.log('Somthing happened wrong');
      }
}).catch(err => err);
}

after that control Your UI submit in tododialouge.js:

 import React, { Component, PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { createBlogPost } from '../../actions/todoadd';
 import { addTodo } from '../../actions/todo'
 import { setTodoDialogOpen, setErrorText } from '../../actions/todoDialog';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import RaisedButton from 'material-ui/RaisedButton';
 import TextField from 'material-ui/TextField';


const initialstate = {
title: '',
desc: '',
type: '',
imageurl: ''
}

class TodoDialog extends Component {
constructor(props) {
    super(props)
    this.state = initialstate;
    this.onChange = this.onChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
};

onChange(e) {
    if (e.target.id === 'title') {
        this.setState({ title: e.target.value });
    } else if (e.target.id === 'desc') {
        this.setState({ desc: e.target.value });
    } else if (e.target.id === 'type') {
        this.setState({ type: e.target.value });
    } else if (e.target.id === 'image') {
        this.setState({ imageurl: e.target.value});
        console.log(e.target.value);
    }
}

handleSubmit() {
    const text = {
        news_title: this.state.title,
        news_description: this.state.desc,
        news_type: this.state.type,
        news_src_url: this.state.imageurl,
        operation:"insert"
    }
    alert(text.news_src_url);
    createBlogPost(text);
    setErrorText(undefined);
    setTodoDialogOpen(false);

};


render() {
    const { messages, todoDialog, setTodoDialogOpen, addTodo, setErrorText } = this.props;
    const styles = {
        button: {
            margin: 12,
        },
        exampleImageInput: {
            cursor: 'pointer',
            position: 'absolute',
            top: 0,
            bottom: 0,
            right: 0,
            left: 0,
            width: '100%',
            opacity: 0,
        },
    };

    function handleClose() {
        setErrorText(undefined);
        setTodoDialogOpen(false);
    };

    const actions = [< FlatButton label={
        messages.cancel || 'cancel'
    }
        primary={
            true
        }
        onTouchTap={
            handleClose
        } />, < FlatButton label={
            messages.submit || 'submit'
        }
            primary={
                true
            }
            onTouchTap={this.handleSubmit} />
    ];

    return (
        <div>
            <Dialog title={messages.todo_add || 'todo_add'} actions={actions} modal={false} open={todoDialog.open} onRequestClose={handleClose}>
                <form>
                    <TextField ref="todoText1" onChange={this.onChange} id='title' hintText={messages.todo_hint1 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label1 || 'todo_label1'} fullWidth={true} />
                    <TextField ref="todoText2" onChange={this.onChange} id='desc' hintText={messages.todo_hint2 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label2 || 'todo_label2'} fullWidth={true} multiLine={true} rows={1} rowsMax={3} />
                    <TextField ref="todoText3" onChange={this.onChange} id='type' hintText={messages.todo_hint3 || 'todo_hint'} errorText={todoDialog.errorText} floatingLabelText={messages.todo_label3 || 'todo_label3'} fullWidth={true} />
                    <RaisedButton label='ADD Photo' style={styles.button} labelPosition="before" containerElement="label"><input type='file' onChange={this.onChange} id='image' style={styles.exampleImageInput} /></RaisedButton>
                </form>
            </Dialog>
        </div>
    )
}
}

some other file u handle as Your requirment. I hope this one is helpful for You.

Martinelli