Solved

One form input box, two buttons.

Posted on 2002-04-02
7
207 Views
Last Modified: 2010-04-09
Here's my problem. I'm looking to have one text box to enter my search terms, but I want two different buttons to click to submit to different sites. For example, one time I want to search Google, the other time I want to search, say, Teoma. Regardless of the exact code needed for each particular search engine, how can I have two different buttons but one text box?

Here is what I have now:

<INPUT TYPE=text name=q size=40 maxlength=255 value="">
<INPUT type=submit name=gs VALUE="Google Search">
<INPUT type=hidden>

I can add and rename another button, but that won't change where the search is going to.
0
Comment
Question by:Decimal
7 Comments
 
LVL 18

Expert Comment

by:bruno
ID: 6914487
i assume you have your form action set to the google search page.  

you can do this using javascript....


get rid of your form action..


<form method="post" name="myForm">

<input type="text" name="search" size="40" maxlength="255" value="" />
<input type="button" name="teoma" value="Google Search" onClick="googleSearch();" />
<input type="button" name="google" value="Google Search" onClick="teomaSearch();" />

</form>


and then put your actions into javascript....


i might do something like this for the google search...

<script>
function googleSearch();
{
window.location = "http://www.google.com/search?sourceid=navclient&q=" + myForm.search.value
}
</script>


I imagine the other search might work similar, but i'm not familiar with it.

I have not tested this, so please, if my script is wrong, someone correct me.


Good luck!

BRUNO


0
 
LVL 30

Expert Comment

by:third
ID: 6914822
"Regardless of the exact code needed for each particular search engine,
how can I have two different buttons but one text box?"

brunobear might be correct if that's the case but if they require form submission, here's a sample.

<script>
function search(srchengine){
  var actn = 'www.google.com/search?'; //default search engine. this should point to google search submission
  frm = document.myForm;
  var textToSearch = frm.search.value;
  if(srchengine=='teoma'){
    actn = 'www.teoma.com/search?'; //should point to teoma search submission
  }
  frm.action = actn + textToSearch;
  frm.submit();
}
</script>

<form method="post" name="myForm">
<input type="text" name="search" size="40" maxlength="255" value="">
<input type="button" name="teoma" value="Google Search" onClick="search('google');">
<input type="button" name="google" value="Teoma Search" onClick="search('teoma');">
</form>
0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 200 total points
ID: 6915205
The simplest solution requires only pure HTML and in-line script.

<html>
<head>
<title>Search Submission</title>
</head>
<body>
<form method="get">
<input type="hidden" name="q">
<input type="hidden" name="t">
<input type="text" name="search" size="40" maxlength="255">
<input type="submit" value="Google Search" onclick="this.form.q.value = this.form.search.value; this.form.action = 'http://www.google.com/search';">
<input type="submit" value="Teoma Search" onclick="this.form.t.value = this.form.search.value;this.form.action = 'http://www.teoma.com/search.asp';">
</form>
</body>
</html>

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

 
LVL 23

Expert Comment

by:b1xml2
ID: 6915210
also, the code works since Google expects a q param and Teoma expects a t param.
0
 

Author Comment

by:Decimal
ID: 6921954
Thanks! Nice and simple.
0
 

Author Comment

by:Decimal
ID: 6921960
Oh hey, any way to get both of those buttons on one line without a table?
0
 

Author Comment

by:Decimal
ID: 6922022
Scratch that, my own mistake, it works fine on one line.
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Scroll 5 news at a time. 4 33
Javascript the "if condition with Or" 8 29
How to resize a div in html 3 39
removing a class in javascript 4 50
This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

830 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