Sharepoint Online Display Template Custom Form Not Found by jQuery?

Question

On Sharepoint Online, using a copy of the default Control_SearchBox.html file, I am adding a custom form to the Search Center main page that looks like this:

The table that contains the form and the SearchBox looks like this:

        <table border='0' cellspacing='0' cellpadding='0'>
        <form name="DocNumForm" id="DocNumForm">
        <tr>
            <td><font size='-0'>Prefix:</font><br><input type='text' name='Prefix' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>Series:</font><br><input type='text' name='Series' size='5' maxlength='3' value=''></td>
            <td><font size='-0'>Base:</font><br><input type='text' name='Base' size='5' maxlength='3' value=''></td>
            <td><font size='-0'>Suffix:</font><br><input type='text' name='Suffix' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>Revision:</font><br><input type='text' name='Revision' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>&nbsp;</font><br><font size='-0'>&nbsp;and/or</font></td>
        </tr>
        </form>     
        <tr>

  <td colspan='6' height="30px" valign="middle" ><font size='+1'> Full Metadata Search</font></td>
        </tr>
        <tr>
            <td colspan="6">

    <div id="SearchBox" name="Control" class="ms-floatLeft">
        <div class="ms-srch-sbLarge ms-srch-sb-border" id="_#= $htmlEncode(searchBoxDivId) =#_">
            <input type="text" value="_#= $htmlEncode(ctx.ClientControl.get_currentTerm()) =#_" maxlength="2048" 
                accessKey="_#= $htmlEncode(Srch.Res.sb_AccessKey) =#_"
                title="_#= $htmlEncode(prompt) =#_"
                id="_#= $htmlEncode(searchBoxId) =#_" autocomplete="off" autocorrect="off" 
                onkeypress="if (Srch.U.isEnterKey(String.fromCharCode(event.keyCode))) { $getClientControl(this).search(this.value);return Srch.U.cancelEvent(event); }" 
                onkeydown="var ctl = $getClientControl(this);ctl.activateDefaultQuerySuggestionBehavior();"
                onfocus="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(true);" 
                onblur="var ctl = $getClientControl(this);ctl.hidePrompt();ctl.setBorder(false);" 
                class="_#= inputClass =#_" /> 
<!--#_ 
            var imagesUrl = GetThemedImageUrl('searchresultui.png');

            var displayImageUrl = Srch.U.htmlEncodeNonBase64ImageUrl(imagesUrl);

            if (showNavigation) { 
_#-->
                <a class="ms-srch-sb-navLink" title="_#= $htmlEncode(Srch.Res.sb_GoNav) =#_" id="_#= $htmlEncode(navButtonId) =#_" 
                    onclick="$getClientControl(this).activateDefaultNavigationBehavior();return Srch.U.cancelEvent(event);" 
                    href="javascript: {}" >
                    <img src="_#= displayImageUrl =#_" class="ms-srch-sbLarge-navImg" id="navImg" alt="_#= $htmlEncode(Srch.Res.sb_GoNav) =#_" />
                </a>
<!--#_ 
            }
_#-->
            <a title="_#= $htmlEncode(Srch.Res.sb_GoSearch) =#_" class="ms-srch-sb-searchLink" id="_#= $htmlEncode(searchBoxLinkId) =#_" 
                onclick="slacSearch.search(this, '_#= $scriptEncode(searchBoxId) =#_')" href="javascript: {}">
                <img src="_#= displayImageUrl =#_" class="ms-srch-sbLarge-searchImg" id="searchImg" alt="_#= $htmlEncode(Srch.Res.sb_GoSearch) =#_" />
            </a>
<!--#_ 
        if (showQuerySuggestions) { 
_#-->
            <div class="ms-qSuggest-container ms-shadow" id="AutoCompContainer">
                <div id="_#= $htmlEncode(suggestionsListId) =#_"></div>
            </div>
<!--#_ 
        } 

        if (showNavigation) { 
_#-->
            <div class="ms-qSuggest-container ms-shadow" id="NavDropdownListContainer">
                <div id="_#= $htmlEncode(navListId) =#_"></div>
            </div>
<!--#_ 
        }

_#-->
        </div>
    </div>
        </td>
        </tr>       
    </table>

I have added a script section that loads jQuery (per Elio Struyf's suggestions, a genius for sure!) and tries to select the form for serialization like this:

</head>
<body>
<script>
    RegisterSod('jquery.min.js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js');
    slacSearch = window.slacSearch || (function () {
        var search = function (elm, inputElmId) {
            EnsureScriptFunc("jquery.min.js", "jQuery", function() {
                if (typeof jQuery != 'function')
                { console.log('jQuery NOT loaded!'); }
                var queryString = $('form[name="DocNumForm"]').serialize();
                console.log("queryString: " + queryString);
                <!-- $getClientControl(elm).search($get(inputElmId).value); -->
            });
        };

        return {
            search: search
        };
    })();
</script>

<div id="Control_SearchBox">

slacSearch is called in the Onclick event of the default SearchBox like this:

                <a title="_#= $htmlEncode(Srch.Res.sb_GoSearch) =#_" class="ms-srch-sb-searchLink" id="_#= $htmlEncode(searchBoxLinkId) =#_" 
                onclick="slacSearch.search(this, '_#= $scriptEncode(searchBoxId) =#_')" href="javascript: {}">
                <img src="_#= displayImageUrl =#_" class="ms-srch-sbLarge-searchImg" id="searchImg" alt="_#= $htmlEncode(Srch.Res.sb_GoSearch) =#_" />
            </a>

Everything displays properly, the Search button loads jQuery, no error messages are posted... but the form is not being serialized, or may not be 'found' at all?

Any idea what I am doing wrong? Thx...

Answer 1

SharePoint already contains a form tag on the page, so it will strip out yours. You can try to replace your form tag with a DIV and do your serialize call as follows:

var queryString = $('#DocNumForm input').serialize();

Sample of how your HTML for the form will look like:

<div id="DocNumForm">
    <table>
        <tr>
            <td><font size='-0'>Prefix:</font><br><input type='text' name='Prefix' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>Series:</font><br><input type='text' name='Series' size='5' maxlength='3' value=''></td>
            <td><font size='-0'>Base:</font><br><input type='text' name='Base' size='5' maxlength='3' value=''></td>
            <td><font size='-0'>Suffix:</font><br><input type='text' name='Suffix' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>Revision:</font><br><input type='text' name='Revision' size='5' maxlength='2' value=''></td>
            <td><font size='-0'>&nbsp;</font><br><font size='-0'>&nbsp;and/or</font></td>
        </tr>
    </table>
</div>