<html>
<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">	
</script>
<script>
	$(document).ready(
	function() {
		$("#search").click(
				function() {
					$.ajax({
						url : "rest/user/search",
						success : function(result) {
							$('#searchResult').html('');
							$.each(result, function(index, user) {
								$('#searchResult').append(
										'<li>  <b>Name :</b> '
												+ user.name
												+ '</br><b>Age :</b>'
												+ user.age
												+ '</br><b> Country :</b>'
												+ user.country
												+ '</br><b>Zip :</b>'
												+ user.zip + '</li>');

							});
						}
					});
				});
				$(".numericOnly").keypress(function(e) {
					if (String.fromCharCode(e.keyCode).match(/[^0-9]/g))
						return false;
				});

				$("#userForm").submit(function() {
					name = $(this).find("#name").val();
					age = $(this).find("#age").val();
					country = $(this).find("#country").val();
					zip = $(this).find("#zip").val();
					var arr = {
						"name" : name,
						"age" : age,
						"country" : country,
						"zip" : zip
					};
					$.ajax({
						type : 'post',
						url : 'rest/user/add',
						contentType : 'application/json',
						data : JSON.stringify(arr),
						success : function(result) {
							$('#addResult').html('');
							$('#addResult').html(result);

						},
						failure : function(result) {
							$('#addResult').html('');
							$('#addResult').html(result);

						}
					});
					return false;
				});

			});
</script>
<body>
	<div id="addResult" style="color: red;font-size: 24px"></div>
	<h2>Fill out form to add user!</h2>

	<form id="userForm">
		<table>
			<tr>
				<td>Name :</td>
				<td><input type="text" name="name" id="name" /></td>
			</tr>
			<tr>
				<td>Age :</td>
				<td><input type="text" name="age" id="age" /></td>
			</tr>
			<tr>
				<td>Country :</td>
				<td><input type="text" name="country" id="country" /></td>
			</tr>
			<tr>
				<td>Zip :</td>
				<td><input type="text" name="zip" id="zip" class="numericOnly" />
				</td>
			</tr>
			<tr>
				<td><input type="submit" value="Add User" /></td>
				<td><input type="button" value="Search Users" id="search" /></td>
			</tr>
		</table>
	</form>
	<div id="searchResult">Search Result will Appear here!</div>


</body>
</html>