Merging 2 search forms into 1 input, plus checkboxes

Question

On my site I have a main search (powered by Google, placed throughout the site) and I have now created a second search (on its own page, which searches my DB for images based on user input text) which is a totally separate search to the google one.

What I want to do - I want both Search forms to share a single text input field, but allow the user to choose which search to use (Google or Images Only) via radiobutton.

So we'd have: [search input field][go] (o)Use Google (o)Image Search only

I'm no coder but can hack enough to just about get by, it just takes me a day or two to figure out and get working. What I need and would save me a great deal of time, as I'm stumped on how to proceed with this or if it is even possible! If someone could tell me A) If it's possible, and B) A few pointers if it is. For instance I'm guessing it will probably need a bit of JavaScript to make it 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&amp;lang="></script>

it's possible, maybe the radio buttons can trigger a javascript function to change the action value on the form for a simple solution (if you need an example just ask). Just a side note though your database query is very insecure and would not be good for production; take a look into mysqli or PDO - mysql is depreciated. — Izion, Jun 05 '15 at 10:28
http://php.net/manual/en/book.mysqli.php - http://php.net/manual/en/book.pdo.php — Izion, Jun 05 '15 at 10:31
This link for the action change: http://stackoverflow.com/questions/5361751/how-to-use-javascript-to-change-the-form-action — Izion, Jun 05 '15 at 10:32
Thank you for alerting me of the risks. I will investigate further and try and get things more secure. Thank you very much — EliteExplorer, Jun 05 '15 at 11:53

RaKXeR · Accepted Answer · 2015-06-05T10:53:02.270

1

OK so here we go. If you plonk this in an empty html file you can see it in action (Tried to make a jsfiddle but didnt work for some reason). What this does is set an "active" id on the selected combo option, and when you click the submit button it grabs the value of the combo option with that id, and goes to the page of that value. so if you click google and then the button you go to google.html, and same goes for image, image.html. If you want some more specifics you can ask, but thats the main logic there.

<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 that "formFunction()" function's code and and use "document.getElementById("active").value" to do what ever you wanted to do.

edited Jun 05 '15 at 10:53

answered Jun 05 '15 at 10:46

RaKXeR

152
2
16

Just want to say thank you very much for this. I have implemented it and so far got it to work for the image search (when menu option is chosen) so I am on the right track and half way there! :) Just got to fiddle with the google search but will let you know when it's active. REALLY appreciate your guidance and time. – EliteExplorer Jun 05 '15 at 11:51
Hello again, sorry. I have managed to get both options working now (Images AND Google) however, I have to considerably change the formfor Google to work, so I was wondering how I can do an IF type true/false statement? I know how to do them in php: is it the same? or is there a better way of doing it. Basically this is the problem: – EliteExplorer Jun 05 '15 at 12:37
For form to work with Google, it has to start like this:

– EliteExplorer Jun 05 '15 at 12:39
Apologies for the formatting. I hope I make sense. Basically the forms are slightly different. I had to remove the 'method=post' from the form for Google to work etc. – EliteExplorer Jun 05 '15 at 12:42

Merging 2 search forms into 1 input, plus checkboxes

1 Answers1