send data through ajax in react js

Question

The following is my react code

var AddRecord = React.createClass({
    componentDidMount: function() {


    },
    render: function() {
        return (
         <form action="process.php" method="post">
            <table><tr><td>Enter Id</td><td><input type="text" name="Id"/></td></tr>
                   <tr><td>Enter Name</td><td><input type="text" name="name"/></td></tr>
                   <tr><td>Enter Email</td><td><input type="text" name="Email"/></td></tr>
                   <tr><td>Enter Phone</td><td><input type="text" name="Phone"/></td></tr>
                   <tr><td>Enter Marks</td><td><input type="text" name="Marks"/></td></tr>
                   <tr><td></td><td><input type="submit" name="submit" value="submit"/></td></tr>
             </table>
           </form>
        );
    }
});

React.render(<AddRecord/>, document.getElementById('form-data'));

I just want to send this data through AJAX in a json format in react js.

Community · Accepted Answer · 2017-05-23 12:15:48Z

0

You can use the serialize JQuery function to serialize the code in an handleSumit function. You can also do the serialization by hand.

  <form onSubmit={this._handleSubmit}>
            <input type="text" name="Id"/>      
            <input type="text" name="name"/>
            <input type="submit" value="Submit the form"/>
  </form>

then in the handle submit function you can

_handleSubmit(e){
    e.preventDefault();
  if (valid) {
   //serialize the form and send ajax request
  }
}

jQuery AJAX form data serialize using PHP if you use JQuery to do your ajax request

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered Dec 10, 2015 at 10:00

Aaleks

4,3436 gold badges34 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vistajess Over a year ago

I think its the onSubmit event of the form you will pass the AJAX function and not the action attribute

Collectives™ on Stack Overflow

send data through ajax in react js

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related