开发者

Using the same input box to search different things

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


Yeah, you can switch action on the form:

$('.web').click(function(){
    $('form')[0].action = "http://google.com/search";
    // do something
    $('.websearch').fadeIn();
});

$('.image').click(function(){
    $('form')[0].action = "http://www.google.com/images?hl=en&q=";
    // do something
    $('.websearch').fadeIn();
});


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


<input type="submit" name="srch_images" value="Search Images">
<input type="submit" name="srch_google" value="Search Google">


if( isset($_POST['srch_images'] )
{
     something();
}
else if( isset($_POST['srch_google']) )
{
     something_else();
}  


You can use the same textbox to search for web and image. Also there is no need to have two form tags. Try this

$('.web').click(function(){
    $('form').attr('action', "http://google.com/search").submit();

});

$('.image').click(function(){
    $('form').attr('action', "http://www.google.com/images?hl=en&q=").submit();

});


HTML:

<form action="http://google.com/search" method="get" class="websearch">
    <input type="text" class="searcher">
    <input type="submit" value="Web Search" class="web">
    <input type="submit" value="Image Search" class="image">
</form>

Javascript:

$('.image').click(function() {
    $(this).parent()
        .attr('action', 'http://www.google.com/images?hl=en&q=');
});

That should do it.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜