2 search boxes on page, 1 not working WordPress
- SOLVED
Hello, I have 1 search box in the header of my site and another on 1 category page.
I added this code to the category page:
<div class="keypublicationssearch">
<form method="get" name="searchform" id="searchform" action="<?php echo home_url(); ?>/" class="searchForm1" onsubmit="return valid();">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="field" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search1.png" title="Search" id="searchsubmit" class="kpsbtn" />
</form>
</div>
However this second search box does not work, anyone know why?
Also I would like to have this second search box only search category (ID=9)
Can this be done?
Thank you
URL to site is screenshot image attached.
Answers (3)
Dbranes answers:
Hi, you have:
onsubmit="return valid();"
where
<script type="text/javascript">
function valid(){
if(document.getElementById('s').value == '')
{
//alert('Please enter something to search.');
document.getElementById('s').focus();
return false;
}
}
</script>
and you are using this in both search boxes.
So when you press the second search button, it checks if the first search text input is empty or not.
If it is empty then the search will not be submitted, and the focus goes to the first search text input.
For the second search box you should consider removing the onsubmit attribute, i.e. try this:
<div class="keypublicationssearch">
<form method="get" name="searchform" id="searchform" action="<?php echo home_url(); ?>/" class="searchForm1">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="field" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search1.png" title="Search" id="searchsubmit" class="kpsbtn" />
</form>
</div>
<strong>update:</strong> and to search within cat=9 you can try to add this line to your second search box:
<input type="hidden" value="9" name="cat" />
i.e.
<div class="keypublicationssearch">
<form method="get" name="searchform" id="searchform" action="<?php echo home_url(); ?>/" class="searchForm1">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="field" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search1.png" title="Search" id="searchsubmit" class="kpsbtn" />
<input type="hidden" value="9" name="cat" />
</form>
</div>
This should give you url like
http://www.example.com/?s=invest&x=43&y=11&cat=9
when you search for "invest".
webGP answers:
Hello!
You have two forms with the same id params (id="s" for input and id="searchform" for form) which is not valid and your js valid() function doesn't work properly. When you try to submit second form, your function check hedaer form, which is empty and return false.
To fix validate function replace the code:
function valid(){
if(document.getElementById('s').value == '')
{
//alert('Please enter something to search.');
document.getElementById('s').focus();
return false;
}
}
Probably in your header.php file.
on:
function valid(form){
if(jQuery(form).find('input').is(":empty"))
return false;
else
return true;
}
You have to add this param in onsubmit="return valid();" line , so replace "return valid();" with "return valid(this);"
You sholud also remove id params from all search form elements and use class instead.
Arnav Joy answers:
try this , it will also display the search box only on category 9 page.
<?php
if( is_category( '9' ) ) {
?>
<div class="keypublicationssearch">
<form method="get" name="searchform" id="searchform" action="<?php echo home_url(); ?>/" class="searchForm1" >
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" class="field" />
<input type="image" src="<?php echo get_template_directory_uri(); ?>/images/search1.png" title="Search" id="searchsubmit" class="kpsbtn" />
</form>
</div>
<?php } ?>