將2個搜索表單合併爲1個輸入，並加上覆選框

Question

在我的網站上，我有一個主要搜索（由Google驅動，放置在整個網站中），現在我創建了第二個搜索（在它自己的頁面上搜索我的數據庫圖像基於用戶輸入文字），這是一個完全獨立的搜索到谷歌。

我想要做什麼 - 我希望兩個搜索表單都共享一個文本輸入字段，但允許用戶通過單選按鈕選擇要使用的搜索（僅限Google或Images）。

所以我們必須： [搜索輸入字段] [GO]（O）使用谷歌（O）圖片搜索只

我沒有編碼器，但能砍夠勉強及格，它只需要我花一兩天就可以搞定並開始工作。 我需要什麼，並會爲我節省大量的時間，因爲我難以接受如何繼續或甚至可能！如果有人能告訴我A）如果可能的話，B）如果是的話，有幾個指針。例如，我猜測它可能需要一些JavaScript來使它成爲可能？ 任何指針將不勝感激，然後我可以看看我能做些什麼。

一切順利， 克里斯

 // My Stand-alone Image Search Page //////////////////////////////// 

<form method="post" action="imagesearch?go" id="search-form"> 
     <input type="text" name="name"> 
     <input type="submit" name="submit" value="Search"> 
    </form> 

// code for above form // 

if(isset($_POST['submit'])){ 
    if(isset($_GET['go'])){ 
    if(preg_match("/^[ a-zA-Z]+/", $_POST['name'])){ 
    $name=$_POST['name']; 

    $sql="SELECT ID FROM ImageTable WHERE Name LIKE '%" . $name . "%' Order by Date Desc LIMIT 50"; 
    //-run the query against the mysql query function 
    $result=mysql_query($sql); 

    // Create while loop and loop through result set// 

    $content .= ' <p><div id="wrapper">'; 

    while($row=mysql_fetch_array($result)){ 
     $id=$row['ID']; 
    $img = new Image($id); 

    // Format results// 

    $content .= '<div id="imgrt"><a href="'.$img->URL.'"><img src="/img/M/'.$img->ID.'.jpg" class="searchimg"><br>'.$img->Name.'</a>'; 



    $content .= '</div>'; 

    } 
    $content .= '';$content .= '</div>'; 
    } 
    else{ 
$content .= ' <p>Please enter a search query</p>'; 
    } 
    } 
    } 

// End of Stand-alone image search page ///////////////////////// 

--------------------------------------------------------------------------- 

// My sites main Google powered Search 

<form action="http://www.example.com/gsresults" id="cse-search-box" class="searchmain"> 

     <input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXX" /> 
     <input type="hidden" name="cof" value="FORID:XX" /> 
     <input type="hidden" name="ie" value="UTF-8" /> 
     <input type="text" name="q" class="mainsearch"> 
     <input type="submit" name="sa" value="Go" class="mainsearchbutton"/> 

    </form> 

    <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&amp;lang="></script> 

Answer 1

行，所以在這裏我們去。如果你把它放在一個空的html文件中，你可以看到它在行動（試圖做一個jsfiddle，但由於某種原因沒有工作）。它的作用是在選定的組合選項上設置一個「活動」ID，當你點擊提交按鈕時，它會使用該ID獲取組合選項的值，然後進入該值的頁面。所以如果你點擊谷歌，然後按鈕，你去google.html，同樣的圖像，image.html。如果你想要一些更具體的東西，你可以問，但那就是那裏的主要邏輯。

<script> 
    function replaceActive(obj) { 
     var activeElm = document.getElementById("active"); 
     activeElm.id = activeElm.id.replace("active", ""); 
     obj.id = "active"; 
    } 

    function formFunction(obj) { 
     obj.action = document.getElementById("active").value + ".html"; 
    } 
</script> 

<form action="#" onsubmit="return formFunction(this);" method="post"> 
    <input type="text" /> 
    <select> 
     <option value="google" id="active" onclick="replaceActive(this);">Google</option> 
     <option value="image" onclick="replaceActive(this);">Images</option> 
    </select> 
    <input type="submit" /> 
</form> 

基本上你可以更改「formFunction（）」函數的代碼，並使用「的document.getElementById（」活動「）。值」做你想要做什麼都。