edgars/gist:4c78c795f7270eb333e5

## gistfile1.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>HTML Form Submit with jQuery AJAX</title>

  <!-- import jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  var form = $('#form'); // contact form
  var submit = $('#submit');  // submit button
  var alert = $('.alert'); // alert div for show alert message

  // form submit event
  form.on('submit', function(e) {
    e.preventDefault(); // prevent default form submit

    $.ajax({
      url: 'http://localhost:8080/forcegym/api/forcegym/plans', // form action url
      type: 'POST', // form submit method get/post
      dataType: 'json', // request type html/json/xml
      //data: form.serialize(), // serialize form data
      data: '{"plan":{"active":true,"description":' +  form.children("description").text +
    	     '","name":"'+ form.children("name").text+
    	     '","price":' +  form.children("price").text+'}}',
        beforeSend: function() {
        alert.fadeOut();
        submit.html('Sending....'); // change submit button text
      },
      success: function(data) {
        alert.html(data).fadeIn(); // fade in response data
        form.trigger('reset'); // reset form
        submit.html('Send Email'); // reset submit button text
      },
      error: function(e) {
        console.log(e)
      }
    });
  });
});
</script>
</head>
<body>
  <h1>Contact us</h1>
  <form action="" method="post">
    <input type="text" name="description" />
    <input type="text" name="name" />
    <input type="text" name="price" />
    <button>Send Mail</button>
  </form>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<title>HTML Form Submit with jQuery AJAX</title>

	<!-- import jQuery library -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
	var form = $('#form'); // contact form
	var submit = $('#submit'); // submit button
	var alert = $('.alert'); // alert div for show alert message

	// form submit event
	form.on('submit', function(e) {
	e.preventDefault(); // prevent default form submit

	$.ajax({
	url: 'http://localhost:8080/forcegym/api/forcegym/plans', // form action url
	type: 'POST', // form submit method get/post
	dataType: 'json', // request type html/json/xml
	//data: form.serialize(), // serialize form data
	data: '{"plan":{"active":true,"description":' + form.children("description").text +
	'","name":"'+ form.children("name").text+
	'","price":' + form.children("price").text+'}}',
	beforeSend: function() {
	alert.fadeOut();
	submit.html('Sending....'); // change submit button text
	},
	success: function(data) {
	alert.html(data).fadeIn(); // fade in response data
	form.trigger('reset'); // reset form
	submit.html('Send Email'); // reset submit button text
	},
	error: function(e) {
	console.log(e)
	}
	});
	});
	});
	</script>
	</head>
	<body>
	<h1>Contact us</h1>
	<form action="" method="post">
	<input type="text" name="description" />
	<input type="text" name="name" />
	<input type="text" name="price" />
	<button>Send Mail</button>
	</form>
	</body>
	</html>