POSTable HTML links

When building web sites you often have to produce POST request on user’s actions. Many times without having user – editable form fields. Server just expects you to send POST. The standard solution is to make hidden form, hardcode some fields value and dynamically populate other values when user presses submit button. It does the job. But the code is spoiled with these pseudo forms and, I believe, you never gonna like it.

There is other approach that is much more concise and programmer friendly (tm:) . The trick is to construct and submit form on-the-fly. Let’s start with JavaScript function that exploits Prototype:

// Expects URL with queryString as param href
function createAndSubmitDynamicForm(href){
	try{
		var lex1 = href.split('?');
		var action= lex1[0];
		var qstr = lex1[1];

		var insertion="<form id='dynamicPostForm' method='POST' action='"+action+"'>";
		if(qstr != null) {
			var params = qstr.split('&');
			(params).each(function(param){
				var keyValue = param.split('=');
				var name = keyValue[0];
				var value = keyValue[1];
				insertion += "<input type='hidden' name='"+name+"' value='"+value+"'/>";
			});
		}
		insertion += "</form>";

		new Insertion.After($('anyDivAtTheEndOfBody'), insertion);
		$('dynamicPostForm').submit();
	}catch(e){
		alert("Error"+e);
	}
}

Code is pretty much self explanatory hence not optimal. You can easily make it twice shorter if you need. Now is time to make a JSP tag that will expose our function in a nice way.


<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<%@ attribute name="code" required="true"%>
<%@ attribute name="href" required="true"%>
<%@ attribute name="confirmMessage" required="false"%>
<%@ attribute name="css" required="false"%>
<input type="button"
	   value="<spring:message code="${code}"/>"
	   class="${css}"
	   onclick="<c:if test="${ ! empty confirmMessage}">if (confirm('<spring:message code="${confirmMessage}"/>')) </c:if>createAndSubmitDynamicForm('${href}');"/>

One thing to mention. We can have optional parameter ‘confirmMessage’ that will ask user if he really wants to submit the form. It is necessary whenever you place buttons ‘Remove’, ‘Delete’, ‘Make-Something-Horrible’ buttons. After plugging you JSP tag you will be able to have on the page something like:

<myTag:post href="controller.htm?action=payDebt&from=savingAccount&to=creditAccount&when=now" code="my.localized.button.name"/>

It is even simpler and better than

<a href="">

HTML tag!

Don’t thank me. At least yet. There is one more feature. Assume that you want to include really dynamic parameters in this POST. Let say you have number of products on the page and under each product there is ‘quanity’ field and ‘Add to Cart’ button. Solution is quite simple again. These is updated version of JS function:

// Expects URL with queryString as param href. Can have {name} placeholders for values of input fields
function createAndSubmitDynamicForm(href){
	try{
		var lex1 = href.split('?');
		var action= lex1[0];
		var qstr = lex1[1];

		var insertion="<form id='dynamicPostForm' method='POST' action='"+action+"'>";
		if(qstr != null) {
			var params = qstr.split('&');
			(params).each(function(param){
				var keyValue = param.split('=');
				var name = keyValue[0];
				var value = keyValue[1];
				// we can have runtime(js) placeholders in params
				if (value.match("^{w+}$")){
					var fieldName = value.substr(1, value.length-2);
					value = $F(fieldName);
				}
				insertion += "<input type='hidden' name='"+name+"' value='"+value+"'/>";
			});
		}
		insertion += "</form>";

		new Insertion.After($('anyDivAtTheEndOfBody'), insertion);
		$('dynamicPostForm').submit();
	}catch(e){
		alert("Error"+e);
	}
}

So now we can have such peace of HTML:

...
<input type='text' id='quantity' value='1'/>
<myTag:post href="cartController.htm?action=addToCart&itemId=123&quantity={quantity}" code="add.to.cart"/>
...

Done.

Advertisements

One Response to “POSTable HTML links”

  1. Mark Says:

    Thank You

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: