Image of Navigational Map linked to Home / Contents / Search A Touch of Client

by Matt Gray - GUI Computing
Image of Line Break

I usually tend to think ASP is pretty cool. It makes database interactivity and Internet programming a lot easier than anything before it, and it's capable of some pretty happening stuff. And the fact that it puts out stock HTML (or does if you code it right!), makes it about as browser-independent as you could possibly want.

But sometimes the most simple looking things are near impossible (or, at least, cumbersome) through just ASP and HTML alone - and this can be frustrating, both for developer and client.

But with the addition of just a touch of client-side JavaScript to supplement ASP, you can make your life, and your user's, much easier.

Maintaining persistency in form elements after a submit when using anchors.

Anchors are a handy, but not often used, HTML function - tags which the browser recognises and goes to when called and very handy when you wish to navigate within a page or to a specific position on a page. They're created using standard HTML, as per :

<a name = "anchor">This is where I want to go</a>
and linked to like this :
<a href = "#anchor">Go to anchor</a>.

When viewing a page with lots of details on a form, (eg. Selecting options, filling out information etc. which may be intended to be posted to another asp page) , if the form is very large and subheadings can make navigation of the page a lot clearer, then sometimes it helps to add anchor tags to the page.

If the user clicks on the link the browser will go to that asp (in this example I am talking about the same page you are on), but it will 'drop' down to the point where "anchor" is ie. The top of the page will now start with the text "This is where I want to go". Simple but kinda handy sometimes.

So, what's the problem? This is all stock ASP / HTML.

Well, if you want to maintain those selections made by the user all the while in between clicking on lotsza anchor hrefs - then that's when things get tedious. Incidentally, this is another case where you can easily get snapped by the browser wars :- some/most/all versions of Netscape manage the anchor tags client side - maintaining persistency - so no workaround is necessary….but IE doesn't. It requires a trip to the server, thus reloading the page, resetting form elements to their default values and losing any selection made. Which is most avowedly not what you want!

To avoid this you could simply submit the form to the Same page - ie. Form action = "thispage.asp#anchor", and then fill the contents of select, text inputs, and radio buttons, etc. but the only way that the browser will go to the anchor is by having the url with an '#' tag - and submitting via any method without grabbing all form elements and the '#' tag will not do everything you intend to do. Also, you usually use anchors when you have more than one anchor needed - so the action property of the form will need to change as well - even though this method does not work anyway.

Believe me I have tried everything for this little IE problem and the only method that does all this is without a massive amount of (quite unnecessary) ASP programming is to use the using the get method and a tiny bit of JavaScript. If you href to something like this

"yourpage.asp?text1=something#anchor" 
then you can get the values of text 1, 2 and 3 and fill them accordingly via ASP and the page will anchor to "anchor" - so everything is dandy!

To get this happening - let's say you have one form named "frmMe" and three anchor tags and links to each anchor. Then you'll have something like this :

<a href = "javascript:goTo('anchor1');">Go anchor 1</a>  

This will call the javascript funciton "goTo" when the link is clicked - now insert the function inbetween <script language = "Javascript"> and </script> tags (which I usually insert in between the <head> and </head> tags :

function goTo(sAnchorIN)
{
   var sText1 = "";
   var sText2 = "";
   var sText3 = "";
   var sParameters;

   //text box values selected by user
   sText1 = document.frmMe.text1.value;
   sText2 = document.frmMe.text2.value;
   sText3 = document.frmMe.text3.value;

   sParameters = "text1=" + sText1 + "&text2=" + sText2 + "&text3=" + sText3;
   sParameters += "#" + sAnchorIN;
   location.href = "yourpage.asp?" + sParameters;
}

Now the browser will call something like the url mentioned earlier :

"yourpage.asp?text1=something#anchor1"

Now your ASP can request those vars and fill each text box accordingly - and voila the page drops down to anchor1 as well. Obviously, this tiny example uses only text boxes, but it can easily be expanded to handle the other form elements.

This is one case where an ounce of client side script can replace a pound of server side headache. .

Multiple submit buttons to multiple pages?

This sort of approach to a href is also handy when having multiple button submits from one page to multiple other pages - submitting the same information on one form but each submit button goes somewhere different. This is also achieved through javascript since the other stuff is limited. One form can usually only be posted to one location - but if you call a javascript function, as mentioned above, then that function can set a hidden value on the form and post to a redirect page - which depending on the requested hidden value, calls the correct page in question.

Start off with a form - <form name = "frmMe" method = "get" action = "redirect.asp">. The method is "get" so that parameters from this form can be passed via the http QueryString (values encoded after the ? in an HTTP request) to the redirect page, and in turn to the appropriate "doing stuff" page (which is determined by the respective submit button pressed). Don't forget to add a hidden value - say sMsg in this case inside the form

<input type = "hidden" name = "sMsg">

Make each submit type a button and give each an onclick event :

<input type = "button" value = "submit1" onclick = "javascript:goTo('action1');">

Now when the button is clicked on the browser will look for a javascript function called goTo -

function goTo(sMsg)
{
   document.frmMe.sMsg.value = sMsg;
   document.frmMe.submit();   //submit the form
}

Now in redirect.asp - simply place some code that handles that sMsg and passes all parameters needed to the next ASP page.

<%@ LANGUAGE="VBSCRIPT" %>

<%
Dim sMsg
Dim sParameters

sMsg = request("sMsg")
sParameters = request.querystring    '//get the form vars passed via the get method 

select case sMsg
   case "action1"
      response.redirect "action1.asp?" & sParameters    '//do stuff for action 1
   case "action2"
      response.redirect "action2.asp?" & sParameters    '//do stuff for action 2
   case "action3"
      response.redirect "action2.asp?" & sParameters    '//do stuff for action 3
end select
%>

Now you have 3 or more if you like, submit buttons on one form - that submit to different asp pages.

This is a trivial example (and doesn't really do anything that you can't do with ASP), but I'm sure you see the possibilities for validation and other pre-processing so that, when it finally arrives at redirect.asp, your app has a pretty good chance of being able to continue. This can really cheer up users, who get pretty cheesed with the process of enter data, click Submit, wait a bit, get a message from the server that something's wrong, go Back, fix, etc, etc.

And, again, it can save you a pretty large slab of server-side coding with little effort.

Server-side ASP is great, but a little judicious use of client-side JavaScript can pay off in productivity as well as performance.



Written by: Matthew Gray
April '98

Image of Arrow linked to Next Article
Image of Line Break
[HOME] [TABLE OF CONTENTS] [SEARCH]