Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
174 views
in Technique[技术] by (71.8m points)

javascript - How to create a submit search button that redirects to search results page?

I have a plugin full screen search overlay in my wordpress website but this search form is only working when the user hit enter I want also the user to click a search button and get redirected to search results page when he enters a search term.can you please help me with this query ??

this is the full screen search.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="<?php echo home_url( '/' ); ?>" id="full-screen-search-form">
            <div id="full-screen-search-container">
                <input type="text" name="s" placeholder="<?php _e( 'Search' ); ?>" id="full-screen-search-input" />
            </div>
        </form>
    </div>
<?php           
                                   

this is the js file of the plugin :

// When the document is ready... 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' );
} );

} );

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Try to change button type attribute to submit.

Because

<button type="button" class="close" id="full-screen-search-close">X</button>

is considered as general button.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...