HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
Drop down search box possible?
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Form
View previous topic :: View next topic  
Author Message
suprfli



Joined: 07 Jul 2005
Posts: 3

PostPosted: Thu Jul 07, 2005 1:44 am     Drop down search box possible? Reply with quote

I've created a test page here where I'm attempting to create something that is specific to my favorite sites and will fit neatly when browsing through my Treo phone. I'm familiar w/search strings used by something like Google or Imdb.com. I've been able to easily create some simple forms that allow me to enter text and then search a site from a single page(the test page I created) but to save even more page real estate I wanted to create a page that has a drop down and depending on the drop down I choose allows me to search based on that chosen drop down. If you look at the test page I created I borrowed some code from a site that does this drop down search using CGI. I don't have any intention of taking this code or using it but I want to create something similar maybe w/Java or DTML. I don't have CGI or PHP or anything special installed on my web server so i was hoping to keep it relatively simple.

Here's my existing code w/2 forms to search Google and also get a 5 day forecast for your zip code:
Code:
<DIV align=left>
<FORM action=http://www.google.com/palm?q= method=get>
  <input maxlength=255 size=20 name=q>
  <input type=submit value="Google" name=btnG> 
  </FORM></DIV>

<DIV align=left>
<FORM action=http://www.accuweather.com/pda/pda_5dy.asp?thisZip= method=get>
  <input name="q" type="text" value="" size="20">
  <input type=submit value="WeatherZip" name=btnG>
  </FORM></DIV>


I'd like to add searches for IMDB.com, Amazon, Movies, Dictionary, Thesarus and quite a few others and know the search strings but I want to have them in a drop down menu. Here's an example of what I've found:
Code:
<FORM action=http://www.handtaxi.com/cgi-bin/engine.cgi method=post>
<SELECT name=engine style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: arial,tahoma,verdana,arial">
  <OPTION value=yho|http://www.google.com/palm?q= selected>Google</OPTION>
  <option value="lacu|http://www.accuweather.com/pda/pda_5dy.asp?thisZip=">Zip Weather</option>
  <option value="qu|http://www.bigcharts.com/palm/bigcharts.asp?mode=Quote&amp;symb=">Ticker Quotes</option>
  <option value="mov|http://www.hollywood.com/avantgo/movies.asp?SearchDate&amp;searchradius=20&amp;SearchZip=">Zip Movies</option>
</SELECT>
  <INPUT style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,tahoma,verdana,arial" size=7 name=keywords>   
  <INPUT class=button style="FONT-WEIGHT: bold; FONT-SIZE: 10px; FONT-FAMILY: geneva,arial,tahoma,verdana,arial" type=submit value=Find name=submit>
</TR></TD></FORM>


Is there any way to mimic what's being used in the form above without having to use CGI or something that I would need to install on my server? Any help would be greatly appreciated and I also would appreciate the learning experience. Thanks!
degsy



Joined: 23 Feb 2005
Posts: 2440
Location: North East, UK

PostPosted: Thu Jul 07, 2005 8:33 am     Reply with quote

There are a few different ways
Code:

<script>
function chooseSearch(){
s = document.searchForm.engine.options[document.searchForm.engine.selectedIndex].value + document.searchForm.keywords.value
location = s
}
</script>
<form action="" method="post" name="searchForm" id="searchForm" >
<select name="engine" style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: arial,tahoma,verdana,arial">
  <option value="http://www.google.com/palm?q=" selected="selected">Google</option>
  <option value="http://www.accuweather.com/pda/pda_5dy.asp?thisZip=">Zip Weather</option>
  <option value="http://www.bigcharts.com/palm/bigcharts.asp?mode=Quote&amp;symb=">Ticker Quotes</option>
  <option value="http://www.hollywood.com/avantgo/movies.asp?SearchDate&amp;searchradius=20&amp;SearchZip=">Zip Movies</option>
</select>
  <input style="FONT-WEIGHT: bold; FONT-SIZE: 11px; FONT-FAMILY: geneva,arial,tahoma,verdana,arial" size="7" name="keywords" />   
  <input class="button" style="FONT-WEIGHT: bold; FONT-SIZE: 10px; FONT-FAMILY: geneva,arial,tahoma,verdana,arial" type="button" value="Find" name="Button" onclick="chooseSearch()"/>
</TR></TD></form>
suprfli



Joined: 07 Jul 2005
Posts: 3

PostPosted: Thu Jul 07, 2005 10:33 am     Reply with quote

Degsy: This is great! It works perfectly. I did notice however one small thing. Some search requests work if the method=get and others work is method=post. I don't understand the difference. What I did to get one search string to work was play around w/the google search I created.

I changed this:
Code:
<FORM action=http://www.google.com/palm?q= method=get>
  <input maxlength=255 size=20 name=q>
  <input type=submit value="Google" name=btnG> 
  </FORM>


to this:
Code:
<FORM action=http://www.imdb.com/find?q=%s method=get>
  <input maxlength=255 size=20 name=q>
  <input type=submit value="IMDB.com" name=btnG> 
  </FORM>


Is there any way to make your script work for a post or get other than having 2 drop downs, one that is for post searches and one that is for get searches? I don't understand enough about the differences and the code to know if I could make all of that work in one drop down search.

BTW, HUGE thanks again. I'm learning a lot and really appreciate your help. Very Happy
degsy



Joined: 23 Feb 2005
Posts: 2440
Location: North East, UK

PostPosted: Thu Jul 07, 2005 11:39 am     Reply with quote

You can experiment with manuipulating the form elements

Code:

<script>
function searchForm(){
url = document.form1.select.options[document.form1.select.selectedIndex].value
s = url.split("*")
document.form1.action = s[0]
document.form1.method = s[1]

return true
}
</script>
<form name="form1" id="form1" method="post" action="" onsubmit="return searchForm()">
  <select name="select">
    <option value="http://www.google.com/palm?q=*get">Google</option>
    <option value="http://www.imdb.com/find?q=%s*get" selected="selected">IMDB</option>
  </select>
  <input name="q" type="text" id="q" />
  <input type="submit" name="Submit" value="Submit" onclick="searchForm()" />
</form>


There are probably easier and different ways to do it depending on the search urls.
suprfli



Joined: 07 Jul 2005
Posts: 3

PostPosted: Thu Jul 07, 2005 12:39 pm     Reply with quote

Thanks again for the reply. I actually found something really interesting. The first code that you provided works in every instance for the search strings that I entered.

What I found though, for example, is if I drop down the box for "Zip Weather", enter my zip code and then press enter I get:
"Method Not Allowed - The requested method POST is not allowed for the URL /test03.htm."

HOWEVER, If I do the same thing and rather than pressing enter after typing the zip code or search string but rather click on the find button then everything works perfectly.

It seems that by pressing enter it doesn't do the query properly I guess. It requires you to click on the find button.

I'm going to try the other code that you just posted and check that out. Or maybe fixing the enter versus clicking on find is something easy to remedy?

Did a quick edit to fix a few typos
exit8babe



Joined: 20 Jul 2005
Posts: 1

PostPosted: Wed Jul 20, 2005 2:27 pm     submit function on enter? Reply with quote

Hi - i am implementing a similar search feature on my site and was wondering if you figured out the submit functionality, so that users can press "enter" rather than the submit button.

thanks!
calvind123



Joined: 11 Nov 2008
Posts: 3

PostPosted: Tue Nov 11, 2008 10:23 am     Reply with quote

Degsy, where would I put my own links into your first code? Could you simplify it to make it easier to read?
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> HTML Form All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 

 
HOSTING / DESIGN
MAKE MONEY

Home
  |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial