Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Multipe Actions in Search Form

Posted on 2008-06-25
13
Medium Priority
?
366 Views
Last Modified: 2010-04-21
Trying to make a search form that can post to 3 different search pages (urls) depending on radial selected. For example, see EE search on the top of this page (Google Search or EE Search).

Questions:
- What do I set the form action to, leave it blank?
- Does the criteria field need to have the same id, can I have multiple?

Here is my (broken) search form:
<form action="" method="POST" name="search" class="headersearchbar">
<input name="criteria" type="text" class="criteria" id="criteria" size="60" />
<a href="javascript:document.search.submit();"><img src="graphics/searchbutton.gif" width="19" height="19" align="absmiddle" border="0"></a>
  <div class="SearchTypes">
    <input type="radio" id="radio" name="HNsearch" value="search.php" checked="checked" class="radio" onClick='this.form.action=search.php'/>
    <label for="radio">Database </label>
    <input type="radio" id="radio2" name="TVSearch" value="searchtv.php" class="radio" onClick='this.form.action=searchtv.php'/>
    <label for="radio2">    Media  </label>
    <input type="radio" id="radio3" name="gSearch" value="0" class="radio"/> 
    <label for="radio3">Blogs</label>
</div>
</form>

Open in new window

0
Comment
Question by:cptnem0
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 6
13 Comments
 
LVL 7

Expert Comment

by:zhuba
ID: 21870828
Action can be whatever you want, and you can use the javascript onSubmit() handler and a submit button instead of using the link if you want (means users can hit enter too and it will work).

As for your criteria field, I assume this is the data you intend to pass to the search engine, you don't need to set a class for it, and it can only have one ID if you are using getElementById() to find it.
0
 

Author Comment

by:cptnem0
ID: 21870847
Thanks for the reply.

So what about the radial buttons?
0
 
LVL 7

Expert Comment

by:zhuba
ID: 21870878
The radial buttons look fine as it is, are the scripts that they change the action to local? Also after looking over your code again since you have the first radio button auto-checked you will need to set the action to search.php for consistency.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:cptnem0
ID: 21870961
Actually no. The second radial will be a search.php on a seperate domain.
0
 
LVL 7

Expert Comment

by:zhuba
ID: 21871082
Then for the second you will need to set that to "http://websitename/search.php"
0
 

Author Comment

by:cptnem0
ID: 21871805
How does this look:
<form action="" method="POST" name="search" class="headersearchbar">
<input name="criteria" type="text" class="criteria" id="criteria" size="60" />
<a href="javascript:document.search.submit();"><img src="graphics/searchbutton.gif" width="19" height="19" align="absmiddle" border="0"></a>
  <div class="SearchTypes">
    <input type="radio" id="radio" name="HNsearch" value="search.php" checked="checked" class="radio" onClick='this.form.action=search.php'/>
    <label for="radio">Database </label>
    <input type="radio" id="radio2" name="TVSearch" value="http://mydomain.com/searchtv.php" class="radio" onClick='this.form.action=http://mydomain.com/searchtv.php'/>
 
    <label for="radio2">  Media  </label>
    <input type="radio" id="radio3" name="gSearch" value="0" class="radio" onClick='this.form.action=/news/search.php'/>
    <label for="radio3">Blogs</label>
</div>
</form>

Open in new window

0
 
LVL 7

Expert Comment

by:zhuba
ID: 21879047
Looks okay, remember to set the form action to whatever the default radio button would have set it to, ie <form action=search.php>

0
 

Author Comment

by:cptnem0
ID: 21879304
ah, good point.
0
 

Author Comment

by:cptnem0
ID: 21879659
Ok, I almost have it working. However, one of the search engines search input name is different then the others.

IE:
search engine 1:   <input name="search" type="text"/>
search engine 2:   <input name="criteria" type="text"/>

If I change the input, it works for one and not the other.

Is there a way to
a: have 2 input names
b: dynamically change the input name

?
0
 
LVL 7

Accepted Solution

by:
zhuba earned 2000 total points
ID: 21879684
Yes, just modify your radio button onclick methods to use the following:

<input type="radio" id="radio" name="HNsearch" value="search.php" checked="checked" class="radio" onClick='this.form.action=search.php;document.getElementById("criteria").name="criteria"'>
    <input type="radio" id="radio2" name="TVSearch" value="http://mydomain.com/searchtv.php" class="radio" onClick=/'this.form.action=http://mydomain.com/searchtv.php;document.getElementById("criteria").name="search"'>
 
0
 

Author Comment

by:cptnem0
ID: 21879756
Awesome. With your help i got it working.
Thanks a lot zhuba!
Here is the code for future reference:
<div id="search">
<form action="" method="POST" name="search" enctype="multipart/form-data" class="headersearchbar">
  <input name="criteria" type="text" id="criteria"/>
  <input type="hidden" name="submit" />
  <div class="SearchTypes">
  	<input type="radio" name="type" value="search.php" onClick='this.form.action=this.value;document.getElementById("search").name="criteria"'>
      <label for="radio">Database </label>
	<input type="radio" name="type" value="search2.php" onClick='this.form.action=this.value;document.getElementById("criteria").name="search"'>
    <label for="radio2"> Media  </label>
	<input type="radio" name="type" value="/news/" onClick='this.form.action=this.value;document.getElementById("criteria").name="s"'>
    <label for="radio3">News</label>
    <input type="submit" name="Submit" value="Submit" id="Submit">
  </div>
</form>

Open in new window

0
 

Author Closing Comment

by:cptnem0
ID: 31470806
This guy helped me all the way through. After every comment he had a response. Bing bang boom.
Thanks!
0
 
LVL 7

Expert Comment

by:zhuba
ID: 21879784
Glad I could help. Good luck with your future coding!
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
Learn the basics of while and for loops in Python.  while loops are used for testing while, or until, a condition is met: The structure of a while loop is as follows:     while <condition>:         do something         repeate: The break statement m…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
Suggested Courses

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question