Wordpress: Custom search result page throws 404 - php

Question

I have followed the link here in codex and created the following
This is my searchform.php
<form action="/search" method="get" role="search" id="searchform">
<div class="input-group">
<input type="text" name="s" id="search" class="form-control search-bar" placeholder="Search Healthkart Blog" value="<?php the_search_query(); ?>">
<div class="input-group-append button-icon">
<button class="btn" type="button" id="searchBtn">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/search-icon.png" alt="search" class="search-icon-white">
<img src="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/search-icon-grey.png" alt="search" class="search-icon-grey">
</button>
</div>
</div>
</form>
I have included it in header.php as
get_search_form();
And the JS for submitting the form in this way
$("#searchBtn").click(function(){
$("#searchform").submit();
})
I have also created a custom search result page called search.php and it contains the normal search page code. Then I have created a page in wordpress pages called search (URL as /search) and assigned the custom search result template to it.
The issue is when I submit the form, it gets redirected to /search/?s=test123 and returns a 404 page. But if I hit the urls /search/test123, it works.
How do I make the search form submit to the URL /search/test123 ?

Answer 1

How do I make the search form submit to the URL /search/test123 ?
You can add :
$("#searchform").on('submit', function(e) {
e.preventDefault();
window.location = $("#searchform").attr('action') +'/'+ $("#searchform #search").val();
});
But with this solution, browser without JavaScript won't work.
To fix it, you can add the following to the search template:
if (isset($_GET['s']) && !empty($_GET['s'])) {
wp_redirect(get_permalink() . $_GET['s'], 301);
die();
}