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' ); } ); } );
Advertisement
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(); } );