0

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:

Form Added

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...

3

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>
  • Thx @Elio! This solved my problem! I have no idea how anyone would be able to derive this answer from MS documentation or any other source except for a forum like this? Kudos to Elio Struyf and StackExchange! – Barry Prentiss Mar 6 '17 at 17:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.