Wie wähle ich ein Suchformular aus?

Question

Ich versuche, eine Auswahlbox zu machen, um von einem Suchformular zum anderen zu wechseln, aber ich bin sehr unerfahren mit HTML-Formularen.

Die beiden Optionen sollten "Blog" und "Shop". (FYI das Blog eines für Wordpress und das Geschäft, ein für Opencart.)

Für Wordpress die Suche url wäre: /? S = TEST Für Opencart:/shop/route = Produkt/Suche & filter_name = TEST

Dies sind die beiden Formen so weit:

<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> 

Vielen Dank im Voraus für Ihre Hilfe, Markus

Answer 1

Mit jQuery, das sind einfach in dervorgenommenen Änderungenbei einer Auswahlbox:

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

---

Wenn Sie zwei Formen haben wollen, und zeigen/verstecken jedes Formular auf der Auswahl basiert, könntest man so etwas tun:

$('#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/

---

Wenn Sie eine einzelne Form haben wollen, aber ändern Sie die Aktion/Methode und Anzeigeeigenschaften dynamisch die Form auf der Auswahl basiert, könnte man es so etwas tun:

$('#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/

---

Welche Methode Sie wählen, davon abhängen, welche Art und Weise leichter zu pflegen ist. Wenn Sie wirklich große Formulare mit nur wenigen Unterschieden haben, können Sie die zweite Methode verwenden. Wenn die Formulare sehr unterschiedlich sind, würde ich nur zwei separate Formulare verwalten und sie entsprechend der Auswahl des Benutzers anzeigen/verbergen, da dies weniger verwirrend oder kompliziert ist.