How to select which search form to use?

I'm trying to make a select box to switch from one searchform to the other, but I'm very unexperienced with HTML forms.

The two options should be "Blog" and "Shop". (FYI the blog one for Wordpress and the shop one for Opencart.)

For Wordpress the search url would be: /?s=TEST For Opencart: /shop/?route=product/search&filter_name=TEST

These are the two forms so far:

<form method="get" id="blogsform" class="form-search" action="/">
 <input type="search" name="s" id="s" placeholder="Blog durchsuchen ...">
 <input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>

<form method="get" id="shopsform" class="form-search" action="/shop/">
 <input type="hidden" name="route" value="product/search">
 <input type="search" name="filter_name" placeholder="Shop durchsuchen ...">
 <input type="submit" class="submit" id="searchsubmit" value="Durchsuchen">
</form>

Thanks in advance for your help, Markus

Solution

With jQuery, these are simple changes applied in the onchange event of a select box:

<select id="chooseform">
    <option value="">Select Form...</option>
    <option value="Blog">Blog</option>
    <option value="Shops">Shops</option>
</select>

If you want to have two forms, and show/hide each form based on the selection, you might do something like this:

$('#chooseform').change(function() {
    var choice = $(this).val();
    if (choice == "Blog")
    {
        $('#blogsform').show();
        $('#shopsform').hide();
    }
    else if (choice == "Shops")
    {
        $('#blogsform').hide();
        $('#shopsform').show();
    }
    else
    {
        $('#blogsform').hide();
        $('#shopsform').hide();
    }
});

Demo: http://jsfiddle.net/Pf9QQ/

If you want to have a single form, but change the action/method and display properties of the form dynamically based on the selection, you could do it something like this:

$('#chooseform').change(function() {
    var choice = $(this).val();
    if (choice == "Blog")
    {
        $('#theform').attr('action', '/');
        $('#s').attr('name', 's');
        $('#s').attr('placeholder', 'Blog durchsuchen ...');
        $('#theform').show();
    }
    else if (choice == "Shops")
    {
        $('#theform').attr('action', '/shop/');
        $('#s').attr('name', 'filter_name');
        $('#s').attr('placeholder', 'Shop durchsuchen ...');
        $('#theform').show();
    }
    else
    {
        $('#theform').hide();
    }
});

Demo: http://jsfiddle.net/JgLSE/

Which method you choose depends on which way is easier to maintain. If you have really large forms with only a few minor differences, you could use the second method. If the forms are very different, I would just maintain two separate entire forms and show/hide them appropriately based on the user's selection, because that will be less confusing or complicated.