• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 371
  • Last Modified:

Multipe Actions in Search Form

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
cptnem0
Asked:
cptnem0
  • 7
  • 6
1 Solution
 
zhubaCommented:
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
 
cptnem0Author Commented:
Thanks for the reply.

So what about the radial buttons?
0
 
zhubaCommented:
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
cptnem0Author Commented:
Actually no. The second radial will be a search.php on a seperate domain.
0
 
zhubaCommented:
Then for the second you will need to set that to "http://websitename/search.php"
0
 
cptnem0Author Commented:
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
 
zhubaCommented:
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
 
cptnem0Author Commented:
ah, good point.
0
 
cptnem0Author Commented:
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
 
zhubaCommented:
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
 
cptnem0Author Commented:
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
 
cptnem0Author Commented:
This guy helped me all the way through. After every comment he had a response. Bing bang boom.
Thanks!
0
 
zhubaCommented:
Glad I could help. Good luck with your future coding!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now