How to do POST in FORM Submit using reactjs and pass the object value into REST service?
Solution 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
Solution 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.
Admin
Updated on July 09, 2022Comments
-
Admin almost 2 years
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.
-
LuisPinto almost 8 yearsChange the submit button for an input with type submit ;)
-
Admin almost 8 yearsThanks @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? -
LuisPinto almost 8 yearsTry 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)}