A react component that sends form data in json format.

JSONForm.jsx

var React = require('react');

// JSONFormData - https://github.com/roman01la/JSONFormData
// Only works on the browser.
require('../../vendor/JSONFormData/src/json-formdata');

var JSONForm = React.createClass({
  propTypes: {
    method: React.PropTypes.string.isRequired,
    action: React.PropTypes.string.isRequired
  },

  handleSubmit: function(e) {
    e.preventDefault();
    
    const form = e.target;
    const formData = JSON.stringify(new JSONFormData(form).formData);

    console.log(formData);
   
    // const xhr = new XMLHttpRequest();
    // xhr.open(form.method, form.action);
    // xhr.setRequestHeader('Content-Type', form.enctype);
    // xhr.send(formData);

    // xhr.addEventListener('loadend', function() {
    // }, false);

  },

  render: function() {
    const { action, method, ...other } = this.props;

    const formProps = {
      ...other,
      method,
      action,
      encType: 'application/json',
      onSubmit: this.handleSubmit
    };

    return (
      <form {...formProps}>  
        {this.props.children}
      </form>
    );
  }
});

module.exports = JSONForm;