Form in Menu

[trung]

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!!!

[Scott]

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..

[Drifter]

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?

[Andy]

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

Code: Select all

,"<form action=doform.php method=post><table border=0><tr><td align=center><input name=email value='Your e-mail ?' size=11 ></td></tr><tr><td align=center><input type=submit value=\"subscribe\"></td></tr></table></form></div>","# type=form;align=center;",,"",1

-- Andy