Two separate problems

radio buttons, search engine, form

[daltman1967]

First of all, many many thanks to rocknbil for his timely (and wonderful) answer to my last problem.

I have a form on my site, similar to this:

<form name="TopForm"
action="mailto:[e-mail]"
onSubmit="return CheckForm(this)"
method="POST"
enctype="multipart/form-data"
style="z-index: 1; width: 498px; height: 253px;
position: absolute; top: 180px; left: 375px">
...
</form>

What I'd like to do is have the form upload the info from the form directly to the e-mail box on the server... but without invoking the MS Outlook mail client. In other words, I'd like the page to send the info, not the e-mail. I know I missed something basic here...

The second problem is this:

I have to separate search forms, as follows:

<!-- #1 -->
<form action="http://www.picosearch.com/cgi-bin/ts.pl" style="margin:0;" method="get" >
<input type="hidden" name="index" value="501250" />
<input type="text" name="query" value="" size="20" />
<input type="submit" name="search" value="Search" />
<br>
<strong>Pico Search</strong></form>

<!-- #2 -->
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div class="style8">
<input type="hidden" name="cx" value="partner-pub-7529959207127333:sa3kc4eg6wc" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" value="" size="20" />
<input type="submit" name="sa" value="Search" />
<br>
</form>

<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang=en"></script>

What I'd like to do is combine the two and have a single search box with a radio button to choose between the two. What I can't find is a single article on how to do this. I've tried copying similar forms, but with no avail. The google search is for money paid for clients searching from my site; the pico search is to search my own website (which was the only way I could find to do that). Any suggestions?

[rocknbil]

What I'd like to do is have the form upload the info from the form directly to the e-mail box on the server... but without invoking the MS Outlook mail client.

<form name="TopForm"
action="mailto:[e-mail]"
onSubmit="return CheckForm(this)"
method="POST"
enctype="multipart/form-data"
style="z-index: 1; width: 498px; height: 253px;
position: absolute; top: 180px; left: 375px">

As you've discovered, any implementation of mailto: opens the local computer's default mail client (which in your case, is Outlook.) Doesn't work with web-based mail programs.

What you need here is a server-side "mailer form" in perl, PHP, asp . . . there are many free ones, but as you will see from digging around this site, many of them are bereft with security holes that make them targets for spam attacks. But you have to start somewhere . . .

<form method="post" action="some-script.cgi">
<form method="post" action="some-script.php">

So the answer here is not found in Javascript or HTML, it's something you need to process on the server.

The second problem is this:....I have to separate search forms, as follows:

Well, doing this with Javascript alone is a bad idea because the solution below makes it Javascript dependent - if JS is disabled, it just won't work. Ideally, you would make a server-side script that you pass all variables to, then set your "choice" there and pass it along to the appropriate service. That's a bit outside the scope of this thread, so let's take a stab at doing it with JS.

First, combine the two forms into one. Initially you would set the actions and search buttons to no value, but I'm going to leave the action set to google (so that in case JS is disabled, it at LEAST works for one of them.)

Note that the search button has a different name for each service. It's not likely these services will need the name sent for the button, but just in case, my JS sets both the name and url depending on which service is selected.

Don't ask or try to leave both radio buttons unchecked. :-) This is how they work. If you want a "nothing selected at first" use a select list with a blank value at the top, or a checkbox, and add appropriate Javascript to make sure one of them is selected before submitting.

Having variables for both services in one form should have no effect, the recipient service should just "ignore" the ones they don't need. Also, in the absence of a form method, get is the default, so just conferting to a URL is fine (equivalent of get).

Additionally, all the id stuff, etc, opens it in a new window, no reason to use _blank.

So here you go, tested and working . . . .

<form action="http://www.google.com/cse" id="custom-search" onSubmit="return chooseSearch();"> 
 <p><strong>Choose Search:</strong> 
 <input type="radio" name="search_type" id="pico" 
 value="1" checked> <label for="pico">Pico Search</label> 
 <input type="radio" name="search_type" id="google"  
value="1"> <label for="google">Google Search</label> 
 <!-- you can put the previous radios on one line - 
 broken into two to keep from making post too wide --> 
 <input type="hidden" name="cx" value="partner-pub-7529959207127333:sa3kc4eg6wc"> 
 <input type="hidden" name="ie" value="ISO-8859-1"> 
 <input type="text" name="q" id="q" value="" size="20"> 
 <input type="submit" name="sa" value="Search"> 
</form> 
<script type="text/javascript"> 
 function chooseSearch() { 
 var url; 
var day = new Date(); 
var id=day.getTime(); 
var params = 'width=600,height=600,scrollbars,resizable'; 
 if (document.getElementById) { 
 var kwd = document.getElementById('q').value; 
 // Encode spaces 
 kwd.replace(/\s+/g, '+'); 
 if (document.getElementById('pico').checked) { 
 url='http://www.picosearch.com/cgi-bin/ts.pl?index=501250&query='+kwd+'&search=Search; 
 } 
 else { 
 url = 'http://www.google.com/cse?cx=partner-pub-7529959207127333:sa3kc4eg6wc&q='+kwd+'&sa=Search'; 
 } 
 var win = open(url,id,params); 
} 
return false; 
 } 
</script> 

[rocknbil]

IGNORE THIS
[quote......Initially you would set the actions and search buttons to no value.....[/quote]

I started out thinking one thing and solved it better as I finished. :-)

[rocknbil]

Per message via PM:

There is a MISSING QUOTE here:

.....50&query='+kwd+'&search=Search; <---------

Should be

50&query='+kwd+'&search=Search';

And the <p> needs a closing tag (unrelated)

<p><strong>Choose Search:</strong> </p>

I updated both of these in an edit, and apparently they didn't "take". That's my story, and I'm sticking to it. :-)

Otherwise, paste everything above between <body> and </body> in a 4.01 doctype and it will work.