I'm doing some updates on a small company website. The company sells products 
through their site, using either an online form or a .PDF of a paper form that 
visitors may print off and mail or fax. Credit cards, purchase orders (PO) and 
checks are all acceptable forms of payment, but only credit card orders may be 
placed online. Online orders are e-mailed to an employee, so values from the 
Web form are merely placed in the message text.

On their current production site, the payment region of the online form 
includes a hyperlink to the PDF. The link is a message that reads, "To use a 
purchase order please click here to use the mail or fax form."

The development version of the application (which, of course, is very different 
from what's in production) includes no such link, but does include "Purchase Order" 
and "Payment Enclosed" in the Payment Method drop down list.

I thought about this. 

Wouldn't it be cool if you could include hyperlinks inside a drop down list? 

Why of course it would!

That way, users selecting those payment methods could be harmlessly sent to 
the PDF.

With a little bit of noodling and a little bit of effort, I did exactly that, 
using a dash each of JavaScript and style statements, and a minor modification 
to the drop down list. (Not all browsers draw the style as intended. I'll 
talk about this in a little bit.)


THE DROP DOWN LIST

This is the original code:

<select name="PaymentMethod" tabindex="50">
	<option name="Visa">Visa</option>
	<option name="American Express">American Express</option>
	<option name="Master Card">Master Card</option>
	<option name="PO">Purchase Order (by fax or mail)</option>
	<option name="Enclosed">Payment Enclosed (by mail)</option>
</select>

The code the form submits to simply grabs the name attribute of the 
selected index and places it in the body of the e-mail message. Low
tech, but effective for their purposes.

We need to add values to the drop down list members -- particularly the ones 
that should trigger our redirect. For those members, the value should be the 
URL of the PDF. The values for the others may be left blank. We'll use our 
JavaScript to determine what values trigger navigation. (We don't want to just
allow the navigation method to execute against blank values, because that 
could cause the current page to reload, and we'd risk losing form values.)
We also need to add the onchange event handler to the control.

	<select name="PaymentMethod" onchange="link(this.form.PaymentMethod)" tabindex="50">
		<option value="0" name="Visa">Visa</option>
		<option value="-" name="American Express">American Express</option>
		<option value="-" name="Master Card">Master Card</option>
		<option value="http://www.website.com/orderPO.pdf" name="PO">Purchase Order (by fax or mail)</option>
		<option value="http://www.website.com/orderCheck.pdf" name="Enclosed">Payment Enclosed (by mail)</option>
	</select>

Notice that the value "-" appears in the two credit card payment methods that 
aren't Visa. Visa has a special value of "0" because elsewhere we're telling
the form to select the "Visa" value by default when the form is reset. For 
the others, their values really don't matter, because the existing code uses 
the name attribute to drive the value placed in the message body.

THE STYLE

We need to modify the style of particular members of the drop down list, so 
that they look like hyperlinks. We'll do that by including a style declaration 
in the two <option>s that now have the hyperlink values.

	<option value="http://www.website.com/orderPO.pdf" name="PO" style="text-decoration:underline;color:blue;">Purchase Order (by fax or mail)</option>
	<option value="http://www.website.com/orderCheck.pdf" name="Enclosed" style="text-decoration:underline;color:blue;">Payment Enclosed (by mail)</option>

(To see what the finished drop down looks like in Firefox 3.6, see 
http://www.halfgk.com/howto/txt/howto_addHyperlinksInDropDown.png.)

!important;: Different browsers will render the style statements in different 
ways. Firefox 3.6 displays the blue and the underline, but Safari 5 and Internet 
Explorer 8 do not display the underline. On the iPhone and iPad, the drop down 
style is superseded by the units' ways of handling those controls. Where non-
mobile browsers are concerned, I believe that as long as you style the text
color to match the color being used for hyperlinks elsewhere on the site, 
visitors will likely pick up what you're layin' down just fine. 

THE JAVASCRIPT

We need a function that will get called each time the drop down list selection
is changed. We need the function to examine the selected item in the drop down 
and to fire a JavaScript alert() and send the user to the .PDF, depending 
on the selected value.

	function link(obj){
		if((obj.options[obj.selectedIndex].value != "-") && (obj.options[obj.selectedIndex].value != "0")) {
			
			/* alert for the redirect */
			alert('This kind of order must be faxed or mailed.\nClick "OK" to continue to our printable form.');
			
			/* redirect */
			window.location=obj.options[obj.selectedIndex].value;
		}
	}

Recall that the values we inserted for each of the credit card types were either
"0" or "-":

	<option value="0" name="Visa">Visa</option>
	<option value="-" name="American Express">American Express</option>
	<option value="-" name="Master Card">Master Card</option>

So the JavaScript function looks for the value of the selected index and, if that
value is neither "0" nor "-", it produces an alert(), then invokes the location()
method of the window object to send the user to the link contained in the value
attribute.

Contact me using the site's contact form if you have questions.
Feel free to use the code in your projects. A shout out in your project would be
thoughtful. Also, drop me a line and let me know how you might have tweaked things
to better suit your needs. Finally, I wouldn't profess to be THE expert on matters
represented in my code -- so drop me a line if you have constructive suggestions, 
too. I'd like to hear from you!
  

Best,

halfgk


copyright 2011 halfgk.com