Form in Menu

Poster: trung
Dated: Friday August 30 2002 - 15:11:02 BST

I needed to allow my users to fill out a search form from the "Search" option on the menu. The sample page for "Menu in Form" did not provide a sample so I took a look at the images in menu samples.

I noticed that the destination parameter allows well formed html tag (in the images in menu case, it was the <img> tag) -- so I experimented with the <form> tag...and it works great!

Here's what I did:
1. I declared my form in a separate variable for the sake of legibility in my code:
var myMenuForm="";
myMenuForm += "<form name=\"searchForm\" method=\"post\" action=\"doSearch.asp\"><table border=\"0\" width=\"100%\" align=\"center\" style=\"border:2px solid white;padding:2px\" cellpadding=\"0\" cellspacing=\"0\">"
myMenuForm += "<tr><td class=\"searchFormLabel\">&nbsp;Last Name:</td>"
myMenuForm += "<td><input class=\"xpbox\" type=\"text\" name=\"last_name\" size=\"18\"></td></tr>"
myMenuForm += "<tr><td class=\"searchFormLabel\">&nbsp;First Name:</td>"
myMenuForm += "<td><input class=\"xpbox\" type=\"text\" name=\"first_name\" size=\"18\"></td></tr>"
myMenuForm += "<tr><td class=\"searchFormLabel\">&nbsp;Employee ID:</td>"
myMenuForm += "<td><input class=\"xpbox\" type=\"text\" name=\"emplid\" size=\"18\" maxlength=\"10\"></td></tr>"
myMenuForm += "<tr><td colspan=\"2\" align=\"right\">"
myMenuForm += "<input class=\"xpbutton\" type=\"submit\" name=\"cmdBtn\" Value=\"Search\" onClick=\"this.enabled=false\">"
myMenuForm += "</td></tr></table></form>"

2. I copied an existing style and modified it to suit my form

3. I declared my "Search" option to show a sub-menu:
,"&nbsp;&nbsp;Search&nbsp;&nbsp;","show-menu=search",,"Search for an employee",1

4. I declared my search sub-menu to show the form, using the "searchStyle" I created in step 2:
addmenu(menu=["search",
,,240,1,"",searchStyle,,"left",effect,,,,,,,,,,,,
,myMenuForm,"recommend.asp?mod=uk",,"UK Recommendation Panel",1
])

It is working as intended. Thank you Andy! This is the best DHML navigation menu in its class!!!

Poster: Scott
Dated: Thursday September 5 2002 - 12:59:02 BST

You can also add the form elements straight into the menu and call relevant JavaScript functions from these elements..
eg..

,"<form method='get' name='sform' action='javascript:void(0)' onsubmit='search(this); return false;'>Search&nbsp&nbsp;<div align=center><img src='/images/left_spacer.gif' width='15' height='3'><br><input type='text' class='formobj' size='20' name='srchval' value='' onchange='javascript:this.value=this.value.toLowerCase();' onkeydown='javascript:this.value=this.value.toLowerCase();'><br><img src='/images/left_spacer.gif' width='15' height='3'><br><input type='submit' class='formobjbut' value='Search'>&nbsp;&nbsp;&nbsp;<input type='button' class='formobjbut' value=' Clear ' onclick='reset()'></div></form>","# type=header;",,,1

Is this menu great or what..

Do you have a link

Poster: Drifter
Dated: Saturday October 5 2002 - 22:11:07 BST

I need a search form in my DHTML Menu badly and i tried but i couldn't get it to work so do you have a link please?

Poster: Andy
Dated: Sunday October 6 2002 - 16:34:44 BST

Try this - It should all be on one line BTW.



-- Andy