Merge two search forms for 1 entry, plus checkboxes
On my site, I have a main search (Google based, hosted all over the site) and now I have created a second search (on my own page that searches my DB for images based on user input text) which is a completely separate search in Google.
What I want to do - I want both search forms to share a single text input, but allow the user to choose which search to use (Google or images only) via radio exchange.
So, we would have: [search input field] [go] (o) Use only Google (o) Image search
I'm not a coder but can hack enough to just get through, it just takes me a day or two to figure it out and work. What I need and I would save a lot of time as I am stumped on how to do this or if it is possible! If anyone could tell me: A) If possible, and B) Multiple pointers, if so. For example, I'm guessing it might need a little JavaScript to make this possible? Any pointers would be appreciated, then I can see what I can do.
All the best, Chris
// My Stand-alone Image Search Page ////////////////////////////////
<form method="post" action="imagesearch?go" id="search-form">
<input type="text" name="name">
<input type="submit" name="submit" value="Search">
</form>
// code for above form //
if(isset($_POST['submit'])){
if(isset($_GET['go'])){
if(preg_match("/^[ a-zA-Z]+/", $_POST['name'])){
$name=$_POST['name'];
$sql="SELECT ID FROM ImageTable WHERE Name LIKE '%" . $name . "%' Order by Date Desc LIMIT 50";
//-run the query against the mysql query function
$result=mysql_query($sql);
// Create while loop and loop through result set//
$content .= ' <p><div id="wrapper">';
while($row=mysql_fetch_array($result)){
$id=$row['ID'];
$img = new Image($id);
// Format results//
$content .= '<div id="imgrt"><a href="'.$img->URL.'"><img src="/img/M/'.$img->ID.'.jpg" class="searchimg"><br>'.$img->Name.'</a>';
$content .= '</div>';
}
$content .= '';$content .= '</div>';
}
else{
$content .= ' <p>Please enter a search query</p>';
}
}
}
// End of Stand-alone image search page /////////////////////////
---------------------------------------------------------------------------
// My sites main Google powered Search
<form action="http://www.example.com/gsresults" id="cse-search-box" class="searchmain">
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:XX" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="mainsearch">
<input type="submit" name="sa" value="Go" class="mainsearchbutton"/>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang="></script>
source to share
OK, so here we go. If you plonk this into an empty html file, you can see it in action (tried a jsfiddle but didn't work for some reason). In this case, the "active" identifier is set in the selected combo option, and when you click the submit button, it grabs the value of the combo option with that identifier and goes to the page of that value. so if you click google and then the button you go to google.html and the same goes for the image, image.html. If you want more details you can ask, but this is the basic logic.
<script>
function replaceActive(obj) {
var activeElm = document.getElementById("active");
activeElm.id = activeElm.id.replace("active", "");
obj.id = "active";
}
function formFunction(obj) {
obj.action = document.getElementById("active").value + ".html";
}
</script>
<form action="#" onsubmit="return formFunction(this);" method="post">
<input type="text" />
<select>
<option value="google" id="active" onclick="replaceActive(this);">Google</option>
<option value="image" onclick="replaceActive(this);">Images</option>
</select>
<input type="submit" />
</form>
Basically you can change this functional code with "formFunction ()" and use "document.getElementById (" active "). Value" to do what you wanted to do.
source to share