Javascript To Parse Urls In The Browser

the context

I have on my server a basic form to email cgi which I'm slowly enhancing over time. The most recent feature was a way of specifiying required fields. If any of those fields are empty then the cgi redirects to a URL specified in the form to display an error message. This way the designer can make the error message fit in with the rest of their site's design.

Unfortunately, a part of good design is to give clear error messages, and thus the error message should only mention which fields were actually missing values, and not mention the fields which were not missing values.

the problem

non-technical designers

the intended users for this technique will be amateur web builders. people that get all confused over javascripting anything. I needed a solution they could cut and paste easily, cookbook fashion.

non-local redirections

given that the intended users for this technique are a bit clueless, there was no way I was going to let them run scripts on my server, no siree. Some of them also wanted the response page to be somewhere else, like on another domain, and that domain may well not be served by my server. Thus, a cgi solution on my server would be moot in any case.

the challenge

How to communicate values or parameters from the server to another page in a manner which didn't assume server-side processing beyond my control. That is, how to pass values back from the cgi in a form which something else could then do whatever they want with (including ignore).

the solution

Well, I thought, what if the redirection included the names of the missing fields in the URL itself, in the form of a searcharg parameter? Then, they could use a javascript on their html page to extract the names and display them however they wanted. Heck, they could even supply the URL for another cgi for the required-missing URL redirection, and thus trigger follow-on processing elsewhere.

All it would take is for my cgi to tack the missing parameters onto the supplied redirection URL. Thus if the form specifies that the page required-error.html should be used, then the cgi would simply modify that to required-error.html?missing=name,email,code. The cgi would detect before-hand if the redirect URL already includes a "?" character (eg. required-error.cgi?form=BR437) and would then instead tack on the parameters with an ampersand (eg. required-error.cgi?form=BR437&missing=name,email,code)

If the page which was redirected to doesn't know what to do with the search arg, then no harm would be done as most web servers would merrily ignore the superfluous search args, even for plain HTML files read straight from disk

All that remained to do was to write up some javascript for the designer to cut & paste into their own page ...

the code

Here is the Javascript I came up with. It looks at the location.href, extracting the searchargs, looks for a searcharg as named in the function call, and returns an array.

function argItems (theArgName) {
	sArgs = location.search.slice(1).split('&');
    r = '';
    for (var i = 0; i < sArgs.length; i++) {
        if (sArgs[i].slice(0,sArgs[i].indexof('=')) == theArgName) {
            r = sArgs[i].slice(sArgs[i].indexOf('=')+1);
            break;
        }
    }
    return (r.length > 0 ? unescape(r).split(',') : '')
}

This can then be used to display an error message as required ... this example presents an unordered list:

<SCRIPT language="JavaScript" type="text/javascript">
<!--
    r = argItems('missing');
    if (r.length > 0) {
		document.writeln('<B>These fields require a value:</B>');
		document.writeln('<UL>');
	    for (var i = 0; i < r.length; i++) {
	        document.writeln('<LI>'+r[i]+'</LI>')
        }
		document.writeln('</UL>');
    }
//-->
</SCRIPT>
<NOSCRIPT>
<B>These fields require a value:</B>
<UL>
	<LI>this field
	<LI>that field
	<LI>list of all fields required
	<LI>even if they did have values
	<LI>just in case they don't have javascript
</UL>
</NOSCRIPT>

tests

• missing = foo bar qaz
  

• arg1=1&missing=me,you,them
  

• arg1=1&missing=me,you,them&arg3=3
  

• missing=me,you,them,us&arg2=2
  

• missing=&arg2=
  

• foo = 2
  

final comments

The key concept underlying this technique is the role reversal of the server sending parameters to the browser via the URL. Everything after that is just code.

I'm no javascript guru, so I won't be embarrassed if you find any mistakes in the above code. In fact, I'd be thankful. Also, I've not tested this on many platforms, so it might well break elsewhere. Do let me know.