In order to test a RESTful service I’m currently working on I’ve created a simple HTML page with a bunch of forms. These forms generate various POST/GET requests to my REST service API methods, so I can manually test the service during a development process. One issue I faced was that the action attribute of HTML form element is static while I need to modify it dynamically based on user’s input (i.e. so I can send a GET requests to a URL like http://www.myrestfulservice.com/item/{itemID} where itemID is entered to the form by a user). JavaScript comes to mind.
So here is how this could easily be done with jQuery:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$("#getForm :submit").click(function() {
var item = $(":input#itemId").val();
$("#getForm").attr("action", "http://www.myrestfulservice.com/" + item);
});
});
</script>
</head>
<body>
<p>
Enter item ID get:
<input type="text" size="50" id="itemId" />
</p>
<form id="getForm" method="get" action="">
<input type="submit" value="Get Item" />
</form>
</body>
</html>