Reactjs post form data using ajax

I have used promises with swagger code generator code here as main one. You can find ajax calling in comment section as well. It worked like a charm..

var React = require(“react”);

var Promise = require(‘bluebird’);
var Store = require(“../stores/Payment.store”);
var Action = require(“../actions/Payment.Action”);
var result = {
“firstName”: ”,
“lastName”: ”,
“cardnum”: ”,
“cvv”:”
};

var mainRes,data;
var Payment = React.createClass({
statics: {
api: function (ctx, attrs) {
if (ctx.req.params) {
this.apiProps.apiParams = extendParams(ctx.req.params, this.apiProps.apiParams);
}
return ComponentAction.getProduct(ctx, this.apiProps);
},
store: function () {
return Store;
},
apiProps: {
apiEndPoint: ‘getCardData’,
apiParams: {}

}
},

getInitialState: function () {
return {pricedata: Store.getCart(),mainRes:result}
//{data: Store.getCart()}

},
handleSubmit: function(e) {

e.preventDefault();

var firstName = this.state.firstName;
var lastName = this.state.lastName;
var cardnum = this.state.cardnum;
var cvv = this.state.cvv;
var jsonFormat;
if(!firstName || !cardnum) return;

// this.setState({
// firstName: ”,
// lastName: ”,
// cardnum: ”,
// cvv:”
// });
// body:JSON.stringify({
// id: “8”,
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// })
// I’m adding a callback to the form submit handler, so you can
// keep all the state changes in the component.
jsonFormat = {
headers:{
‘content-type’: ‘application/json’
},
data:{
id: “8”,
first_name: firstName,
last_name: lastName,
number:cardnum,
cvv2 : cvv,
}
}
this.constructor.apiProps.apiParams = jsonFormat.data;
Action.getCardData({appConfig: this.props.ctx},this.constructor.apiProps).then(function (res) {
console.log(res);
if(res.response.statusCode == 200){
alert(“Thanks for your payment”);
//this.transitionTo(“/test”);
}
},function(err){
console.log(err);
});

// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// this.onFormSubmit({
// first_name: firstName,
// last_name: lastName,
// number:cardnum,
// cvv2 : cvv,
// url: “http://localhost:3000/api/cards/”
// }, function(data) {
// //this.setState({ message: data });

// console.log(data);
// postdata(data);

// });

// function postdata(data){
// jsonFormat= data;
// }
// this.constructor.apiProps.apiParams = jsonFormat;
},
changeFName: function(e) {
this.setState({
firstName: e.target.value
});
},

changeLName: function(e) {
this.setState({
lastName: e.target.value
});
},
changeCard: function(e) {
this.setState({
cardnum: e.target.value
});
},
changeCvv: function(e) {
this.setState({
cvv: e.target.value
});
},
// onFormSubmit: function(data, callback){

// $.ajax({
// url: data.url,
// dataType: ‘json’,
// type: ‘PUT’,
// data: data,
// success: callback,
// error: function(xhr, status, err) {

// //console.error(this.props.url, status, err.toString());

// }.bind(this)
// });
// },

render: function () {

return(

Welcome to Mini-Basket Payment Page.
Total Price: {this.state.pricedata.totalPrice}
Please complete your payment by filling your card details.

First Name
Last Name
Card Number
CVV

</form >
</div>
);
}
});

//
module.exports = Payment;

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s