How to Add a Selected Option Value to Search Query - php

Question

So you can check out the search on my site at http://www.CyberBytesInc.com it's working just fine at the moment. What I am trying to do though is I have a search parameter dropdown next to the search, one "Search Entire Site" and the other "Search Blog". I am using Google Custom Search so to search just my blog all I need to have before the search term is "site:cyberbytesinc.com/blog/" aka, the value of the dropdown.
Here's the HTML:
<div id="search" class="hidden">
<form method="get" action="/search" class="row no-p-mobile">
<select id="search-parameter" name="parameter">
<option value="">Search Entire Site</option>
<option value="site:cyberbytesinc.com/blog/">Search Blog</option>
</select>
<input id="search-field" name="q" type="search" placeholder="Enter to Search"/>
<span class="visible-desktop"><input class="red-btn" type="submit" value="Search ›"></span>
<!-- x-webkit-speech -->
</form>
</div>
Pretty much if they leave it on "Search Entire Site" which is the default, then I want it to do just as it already does, so I have the value set to nothing. But if they select "Search Blog" then I want them to type in their search query next to it, and upon hitting enter, it would just take the value of the option they selected and throw it into the URL right before their search term, so it would go from:
.com/search?q=example
to
.com/search?q=site:cyberbytesinc.com/blog/%20example
I know this has to be very straightforward, I am just pretty new with all of this and have spent a bit trying to figure it out on my own and I'm at the point where I could just use some quick help!
Thanks so much guys/gals (:
EDIT (I'm VERY Close now, Just Need A Little Help):
I have tried numerous things, for instance, naming both the option and the textfield the same name, e.g. "q" and I have managed the url to become this when searching just the blog:
.com/search?q=site%3Acyberbytesinc.com%2Fblog%2F+&q=example
So it's actually pulling in the proper things into the URL when selecting just the blog in the dropdown. The problem is, Google Custom Search is again just recognizing the last
"q=example"
and ignores the first
"q=site%3Acyberbytesinc.com%2Fblog%2F"
even though there is a + inbetween the two.
If I could somehow get the term to carry over and not have the second "q=" then it would work, because it works perfectly if you just go in and remove the second "q=" in the URL structure it makes.

Answer 1

You're going to need to change this:
<div id="search" class="hidden-desktop">
<ul class="row no-p-mobile p-top-10 p-bottom-10">
<li>
<select id="search-parameter" name="parameter">
<option value="">Search Entire Site</option>
<option value="site:www.cyberbytesinc.com/blog/%20">Search Blog</option>
</select>
</li>
<li><form method="get" action="/search"><input id="search-field" type="search" name="q"/></form></li>
</ul>
</div>
to this
<div id="search" class="hidden-desktop">
<ul class="row no-p-mobile p-top-10 p-bottom-10">
<li>
</li>
<li><form method="get" action="/search"><input id="search-field" type="search" name="q"/>
<select id="search-parameter" name="parameter">
<option value="">Search Entire Site</option>
<option value="site:www.cyberbytesinc.com/blog/%20">Search Blog</option>
</select>
</form></li>
</ul>
</div>
You need to make sure the select element is inside the form element so that it's associated appropriately, as that form element will define how and what is sent to the server. That'll automagically put the value of the select in the URL query string and the rest is all up to you.