Google Custom Search Engine only works from home page

Question

I have added the google custom search engine to my website. I have a search button in the header on each page and a search.php to display the results.

When I enter a search using the search button on the homepage I'am sent to the search page and the results display perfectly. But when I search from any other page I'am redirected to my 404 page.

I think this is because the interior page url is messing with things. If I delete 'grants/' from the interior page's resulting url then I am sent to the correct search results page.

Home page search => http://mywebsite.com/?cx=searchbox_009582834740986793771%3Awaaaw_jsm_w&cof=FORID%3A11&s=alleghany&cx=submit

Interior page search => http://mywebsite.com/grants/?cx=submit&cof=FORID%3A11&s=alleghany

So I guess my question now becomes... How do I pass the correct search url when I submit searches from interior pages on my website?

Below is the code for my search box in header.php: (Note: in the past I have simply copy/pasted the code google creates for you, but this time in order to keep the unique search box styling I already had I implemented the form in the way you see below by putting the google search id# into the input's value="" field.)

                            <div id="sb-search" class="sb-search">
                            <script>
                              (function() {
                                var cx = '009582834740986793771:waaaw_jsm_w';
                                var gcse = document.createElement('script');
                                gcse.type = 'text/javascript';
                                gcse.async = true;
                                gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
                                    '//cse.google.com/cse.js?cx=' + cx;
                                var s = document.getElementsByTagName('script')[0];
                                s.parentNode.insertBefore(gcse, s);
                              })();
                            </script>
                            <div style="width:0px;overflow:hidden;height:0px;"> <!-- if you use display:nonw here it doesn't work-->
                                <gcse:searchbox-only results="http://alleghanyfoundation.ivygroup.com/"></gcse:searchbox-only>
                            </div>

                            <form id="searchbox_009582834740986793771:waaaw_jsm_w" action="">

                                <input value="searchbox_009582834740986793771:waaaw_jsm_w" name="cx" type="hidden"/>
                                <input value="FORID:11" name="cof" type="hidden"/>

                                <input class="sb-search-input" placeholder="Search Alleghany..." type="search" name="s" id="s">

                                <input class="sb-search-submit" type="submit" value="submit" name ="cx">

                                <span class="sb-icon-search"><i class="fa fa-search"></i> Search</span>
                            </form>
                         </div>

Answer 1

Since it is working on the home page URL, you can set the action of your form to always submit to the home page. / is a relative URL that refers to the home page of of your website.

<form id="searchbox_009582834740986793771:waaaw_jsm_w" action="/">