Question

I have an input which searcher’s google web and another input to search google images. For each input i have buttons to fadeIn either. Can the search input be the same but search different sites?

Here is a fiddle of what I currently have: http://jsfiddle.net/kwC36/

To search the web I use:

<form action="http://google.com/search" method="get" class="websearch">

and to search images I use:

<form action="http://www.google.com/images?hl=en&q=" method="get" class="imagesearch">

Thanks alot

Answer 1

Assign custom data attributes to the button so the form action can be dynamic:

HTML:

<form id="search-form" action="" method="get" class="websearch">
    <input id="search-field" type="text" class="searcher" name="" /> 
</form>

<input type="button" value="Search the web" class="search-btn" data-action="http://google.com/search" data-field-name="" />
<input type="button" value="Search images" class="search-btn" data-action="http://www.google.com/images?hl=en&q=" data-field-name="q" />

JQuery:

$('.search-btn').click(function(e){
    e.preventDefault();
    $('#search-field').attr('name',$(this).data('field-name'));
    $('#search-form').attr('action',$(this).data('action')).submit();
});