Why is my search query returning undefined, while my page populates with the term's results? Using business catalyst

Question

I'm trying to get the search term to appear in the URL. What am I doing wrong?

<form name="catsearchform74255" method="post" onsubmit="processSearch(this)" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&amp;keywords=">
        <div class="input-field search-box">
            <input id="CAT_Search" type="search" name="CAT_Search" placeholder="What are you looking for?" class="white" required="true">
            <label class="label-icon" for="CAT_Search"><i class="material-icons">search</i></label>
            <i class="material-icons">close</i>
        </div>
         <script type="text/javascript">
        function processSearch(form) {
            form.action = form.action + CAT_Search.value;
        }  
    </script>
    </form>

Answer 1

1. Change method="post" to method="get".
2. Update any server-side code referencing post variables to reference get variables. For example, in PHP code, change $_POST["CAT_Search"] to $_GET["CAT_Search"].

Also, the correct format for the required HTML attribute is either required="" or required="required.

Answer 2

Code

This can be done with JS, you can't edit the method as Business Catalyst expects a post for this form.

If you change the form to the following:

<form name="catsearchform74255" id="searchForm" method="post" action="/Default.aspx?SiteSearchID=2248&ID=/search-results&amp;keywords=">
    <div class="search-box">
        <input class="cat_textbox_small" type="text" name="CAT_Search" id="CAT_Search">
        <input id="submitForm" onclick="submitFormScript()" type="button" class="cat_button" value="Search">
    </div>
</form>

and then add the following jQuery:

function submitFormScript() {
    var searchAction = $("#searchForm").attr("action");
    searchAction = searchAction + $("#CAT_Search").val();
    $("#searchForm").attr("action", searchAction);
    $("#searchForm").submit();
}

Explanation

By adding the ID's to the fields on the form and then taking type="submit" off the input button we can edit the form action before we submit the form.

In the JS we are getting the form action, adding on the value of the search box (users input) and then setting that back to the form action attribute. After that we have the URL that we want to send to the next page so we can then submit the form.