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'> </font><br><font size='-0'> 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...
