[cgiapp] Image Submit Buttons - revisited.

[Lyle Brooks <suppressed>]

I say "revisited", because I saw a posting 
(Image Submit Buttons - 18 Mar 2002 - Jesse Erlbaum)
in the archives, but I wasn't subscribed to the list at that time.

I thought I'd share one approach I used, which was inspired in part
by Jesse's posting.

I have a form that displays a tabular listing of users.  Each row 
lists the user's name and a corresponding image "buttons" to either modify
or delete the user.  (Example: via ASCII art :-)

John Smith                    [ Modify ]   [ Delete ]
Jane Doe                      [ Modify ]   [ Delete ]


What made this form alittle challenging was the following...

1) I couldn't substitute submit buttons for the images.  The images were
simply more aesthetically pleasing.

2) I had multiple run modes such as a "modify" and a "delete".  There are
other form elements that generate other run modes, but suffice it to say
all you need are at least two distinct run-modes that could be generated
from the form to increase the level of difficulty. 

3) Avoid the use of javascript for form submission.  There were two main
reasons for this a) javascript can make web browsing quite challenging
when you are trying to satisfy "accessibility" issues and b) I wanted to
interact with the application via a Perl-LWP script as well as through
a browser.  Javascript can be a very "unwelcome" addition for these
situations.

4) I wanted to maintain the HTTP semantics for GET and POST transactions.
GET methods should be cachable and not alter state, whereas POST transactions
can alter state.


So what I came up with was this.

When the user selects the [ Modify ] image, the application brings up a
new form via a GET, so that was straight forward.  I just encoded the image
like so:

<a href="/webapp.cgi?rm=modify&id=4><img src="/images/modify.gif"></a>

When the user selects the [ Delete ] image, the application will delete
the user (subject to authorization requirements).  I wanted to do a POST,
which meant using an image button, but I also had to find a way to encode
both the run mode, as well as the id value for the selected user.  So I
encoded that in the name attribute like so:

<input type="image" name="rm=>delete,id=>4" src="/images/delete.gif">


Finally, I modified the code from Jesse's posting to do something like the
following:

sub setup {

   my $self = shift;


   $self->mode_param(\&custom_rm);

   ...

}


sub custom_rm {

   my $self = shift;


   # Determine the run mode by doing the following

   # 1) Use the run mode if it is defined in the CGI input parameters.

   # 2) Check for an image button submission (ie. is there an input 
   #    parameter with a /\.x$/ pattern.  If so decode the name and
   #    inserted the decoded values and put them into the input parameter
   #    list.

   # 3) Check to see if 2) found a run mode, if so return that.


   # 4) If we get here just return the initial run mode.

}
   

There may be other approaches, but this one seemed to work and I thought it 
might be worth sharing in the event others were interested.
   

---------------------------------------------------------------------
Web Archive:  http://www.mail-archive.com/suppressed/
To unsubscribe, e-mail: suppressed
For additional commands, e-mail: suppressed