Combined two Search Forms - not functioning

[Chrisj]

Thanks for all the previous help. The web script that I’m modifying has a Search Form that successfully appears when a particular type of page displays:

 

<?php if (preg_match('#/?sub__(\d)+\b#',$_SERVER['REQUEST_URI'],$matches)) {
echo "<form action='#' method='POST' id='sub_id'>
<input name='search_sub'>
<input type='submit' value='search' />
<input type='hidden' value='{$matches[1]}'> </form>";
} ?>

I wanted to enhance the Form’s appearance and tested this HTML Search Form (which slides the text-enter-field across the page upon selecting the magnify glass icon) seperately successfully:

<div id="sb-search" class="sb-search " >
    <form>
        <input class="sb-search-input " onkeyup="buttonUp();" placeholder="Enter your search term..." onblur="monkey();" type="search" value="" name="search" id="search">
        <input class="sb-search-submit" type="submit"  value="">
        <span class="sb-icon-search"><i class="fa fa-search"></i></span>
    </form>
</div>

the HTML Search Form has this corresponding js:

function buttonUp(){
         var valux = $('.sb-search-input').val();
            valux = $.trim(valux).length;
            if(valux !== 0){
                $('.sb-search-submit').css('z-index','99');
            } else{
                $('.sb-search-input').val('');
                $('.sb-search-submit').css('z-index','-999');
            }
    }

    $(document).ready(function(){
        var submitIcon = $('.sb-icon-search');
        var submitInput = $('.sb-search-input');
        var searchBox = $('.sb-search');
        var isOpen = false;

        $(document).mouseup(function(){
            if(isOpen == true){
            submitInput.val('');
            $('.sb-search-submit').css('z-index','-999');
            submitIcon.click();
            }
        });

        submitIcon.mouseup(function(){
            return false;
        });

        searchBox.mouseup(function(){
            return false;
        });

        submitIcon.click(function(){
            if(isOpen == false){
                searchBox.addClass('sb-search-open');
                isOpen = true;
            } else {
                searchBox.removeClass('sb-search-open');
                isOpen = false;
            }
    });
});

I’ve combined the two Search form codes successfully like so:

 

<?php
if (preg_match('#/?sub__(\d)+\b#',$_SERVER['REQUEST_URI'],$matches)) {
echo "<form action='#' method='POST' id='sub_id'>
<input class='sb-search-input ' onkeyup='buttonUp();' placeholder='Enter your search term...' onblur='monkey();' type='search' value='' name='search_sub' id='search'>
<!--<input name='search_sub'>-->
<input class='sb-search-submit' type='submit' value=''>
<span class='sb-icon-search'><i class='fa fa-search'></i></span>
<!--<input type='submit' value='search' />-->
<input type='hidden' value='{$matches[1]}'>
</form>";
}
?>

 

however, now the search Form does not slide the text-enter-field across the page, it is just already 'open' when the page displays.

I’m looking for help with getting the text-enter-field to slide across the page upon selecting the magnify glass icon again, instead of it being 'open' (when the page displays).

If that makes sense I look forward to any assistance.

 

 

 

 

 

 

 

 

 

 

 

 

Edited November 11, 2021 by Chrisj