How to make search button redirect to search results page?

I am a beginner and new to this stuff I have a search form with button type submit I want when I click on that button to open a new window displaying the search results with a url. Please can someone help me with this query ??

php code :

function output_full_screen_search() {      
    
    ?>
<div id="full-screen-search">
        <button type="button" class="close" id="full-screen-search-close">X</button>
        <form role="search" method="get" action="https://hostingstudies.com/" target="_blank" id="full-screen-search-form">
            <div id="full-screen-search-container">
                <input type="text" name="s" placeholder="Search" id="full-screen-search-input" />
                <button type="submit">Search</button>
            </div>
        </form>
    </div>
<?php


}

}

jquery code :

jQuery( document ).ready( function( $ ) {
    
    // ... display the Full Screen search when:
    // 1. The user focuses on a search field, or
    // 2. The user clicks the Search button
    $( 'form[role=search] input, form[role=search] button' ).on( 'focus, click', function( event ) {
        // Prevent the default action
        //event.preventDefault();
    
        // Display the Full Screen Search
        $( '#full-screen-search' ).addClass( 'open' );
    
        // Focus on the Full Screen Search Input Field
        $( '#full-screen-search input' ).focus();
    } );

    // Hide the Full Screen search when the user clicks the close button
    $( '#full-screen-search button.close' ).on( 'click', function( event ) {
        // Prevent the default event
        event.preventDefault();

        // Hide the Full Screen Search
        $( '#full-screen-search' ).removeClass( 'open' );
    } );

} );

Answer

Remove the event.preventDefault(); from your handler, it stops the form submission which is the default behavior for forms.

    $( 'form[role=search] input, form[role=search] button' ).on( 'focus, click', function( event ) {
        // Display the Full Screen Search
        $( '#full-screen-search' ).addClass( 'open' );
    
        // Focus on the Full Screen Search Input Field
        $( '#full-screen-search input' ).focus();
    } );

Advertisement

Answer