How to integrate JavaScript function with WordPress search form

Other Questions Wordpress
1

I’m working on creating a custom search feature for my WordPress site and need help connecting a JavaScript function to the search form.

I’ve added my custom JavaScript code to the header.php file in my theme:

<head>
  <script>
      var customSearchHandler = function() {
            // my custom search logic here
            console.log('Custom search executed');
        }
  </script>
</head>

Here’s my current WordPress search form in searchform.php:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
    <div>
        <label class="screen-reader-text" for="s">Search for:</label>
        <input type="text" value="" name="s" id="s" />
        <input type="submit" id="searchsubmit" value="Search" />
    </div>
</form>

I want to modify this form to trigger my JavaScript function instead of the default WordPress search. I tried something like this:

<form action="javascript:customSearchHandler()">
    <input type="text" name="query" value="" id="searchInput">
    <input type="submit" value="Search">
</form>

What’s the proper way to connect my JavaScript function to the WordPress search form? Any guidance would be helpful!

2

just add onsubmit="return customSearchHandler()" to your form tag and make sure your function returns false to prevent the default submission. way simpler than event listeners. don’t forget to grab the search value with document.getElementById('s').value inside your function or it won’t work properly.

3

The onclick approach works but you’ll hit problems with form validation and accessibility. I’ve dealt with this on three sites last year - cleanest fix is using jQuery if your theme already loads it.

Drop this in functions.php (not header.php):

wp_enqueue_script('custom-search', get_template_directory_uri() . '/js/custom-search.js', array('jquery'), '1.0', true);

Then in custom-search.js:

jQuery(document).ready(function($) {
    $('#searchform').on('submit', function(e) {
        e.preventDefault();
        var searchTerm = $('#s').val();
        customSearchHandler(searchTerm);
    });
});

This keeps your original form markup intact so plugins don’t break, handles search terms properly, and follows WordPress standards. Pass the search term as a parameter instead of trying to grab it from inside the function.

4

I hit the same issue building a custom search for a client. Your approach bypasses WordPress’s search handling completely, which breaks plugins and themes that hook into the search process.

Ditch the action="javascript:customSearchHandler()" and use an event listener instead. Keep the original form structure but intercept the submission:

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('searchform').addEventListener('submit', function(e) {
        e.preventDefault();
        customSearchHandler();
    });
});

This keeps the WordPress form structure while running your custom function. Also, enqueue your JavaScript with wp_enqueue_script() in functions.php rather than dumping it in header.php. Better compatibility and follows WordPress standards.