Untitled

<html>
<head>
</head>
<body>

<h3> City Data</h3>

 City Name:
  <input type="text" name="cityName" id="cityName">
  <br><br>
  Description: <textarea rows="4" cols="50" name="cityDescription" id="cityDescription" form="cityForm"></textarea>
    <br><br>
   <input type="submit" value="Submit" id="sayButton" class="buttons">


<script src="city-scripts.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>

</body>
</html>


-----javascript---------

var API_ENDPOINT = "YOUR-API-GATEWAY-HERE"

document.getElementById("sayButton").onclick = function(){

	var inputData = {
		"cityName": $('#cityName').val(),
		"cityDescription" : $('#cityDescription').val()
	};

	alert("cityName:" + inputData.cityName);
	alert("cityDescription:" + inputData.cityDescription);

	$.ajax({
	      url: API_ENDPOINT,
	      type: 'POST',
	      data:  JSON.stringify(inputData)  ,
	      contentType: 'application/json; charset=utf-8',
	      success: function (response) {
					document.getElementById("postIDreturned").textContent="Post ID: " + response;
	      },
	      error: function () {
	          alert("error");
	      }
	  });
}