我試圖追加一個選項值到窗體動作

Question

我試圖使用方法get將選項值追加到窗體動作。提交發送表單請求但未將選擇選項附加到該操作？

所以，當提交表單時，應該使用>

https://url.here.com?domain=用戶利用這裏查詢+選定的選項？

在此先感謝。

<form action="https://url.here.com?domain=" method="get"> 
       <div class="just-arrived-search"> 
        www.<input type="search" name="domain" placeholder="Search" /> 
        <select> 
         <option value="">All</option> 
         <option value=".bike">.bike</option> 
         <option value=".clothing">.clothing</option> 
         <option value=".guru">.guru</option> 
         <option value=".holding">.holdings</option> 
         <option value=".plumbing">.plumbing</option> 
         <option value=".singles">.singles</option> 
         <option value=".venture">.ventures</option> 
        </select> 
        <button class="btn-new" type="submit">Register Domain</button> 
       </div> 
      </form> 

Answer 1

UPDATE：既然你編輯您的初始後更清楚地說明你正試圖達到什麼樣的，這裏是一個簡單的解決您的問題。

在提交之前，使用JavaScript將選定的值附加到域中。改變按鈕的onclick屬性反對使其提交表單。

添加這個JavaScript到你的頭段（或任何你想要的，但慣例通常是身體的頭部分或底部）：

<script type="text/javascript"> 
    function submitForm() { 
     var ext = document.getElementById('ext'); 
     var selected_opt = ext.options[ext.selectedIndex].value; 

     // Add own code to handle "All" here 

     var domain = document.getElementById('domain'); 
     // Append selected option 
     domain.value = domain.value + selected_opt; 

     // Submit form 
     document.getElementById('myForm').submit(); 
    } 
</script> 

這是更新的HTML代碼，與它一起去：

<form action="https://url.here.com" method="get" id="myForm"> 
    <div class="just-arrived-search"> 
     www.<input type="search" id="domain" name="domain" placeholder="Search" /> 
     <select id="ext"> 
      <option>All</option> 
      <option>.bike</option> 
      <option>.clothing</option> 
      <option>.guru</option> 
      <option>.holdings</option> 
      <option>.plumbing</option> 
      <option>.singles</option> 
      <option>.ventures</option> 
     </select> 
     <button class="btn-new" onclick="submitForm();">Register Domain</button> 
    </div> 
</form>