2017-08-25 44 views
0

我需要顯示/下拉列表從HTML頁面的選定值重定向到一個新的一頁。代碼無法執行。需要關於這個的幫助(使用javascript)。下拉列表項的值傳遞到另一個頁面作爲查詢字符串

這些都是「mainTest.html」文件中的代碼。我在將頁面重定向到另一個HTML頁面時遇到了問題。

< script type = "text/javascript" > 
 
    (function() { 
 
    /** 
 
    * Handles the click of the submit button. 
 
    */ 
 
    function onSubmitClicked(event) { 
 
     // Get the input element from the DOM. 
 
     var beverage = document.getElementById('foodbeverage'), 
 
     // Get the value from the element. 
 
     beverageValue = beverage.value, 
 
     // Construct the URL. 
 
     url = 'newPageTest.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=' + encodeURIComponent(status); 
 

 
     // Instead of going to the URL, log it to the console. 
 
     console.log('goto to URL: ', url); 
 
    } 
 

 
    // Get the button from the DOM. 
 
    var submitButton = document.getElementById('btngo'); 
 
    // Add an event listener for the click event. 
 
    submitButton.addEventListener('click', onSubmitClicked); 
 
    })(); < 
 
/script>
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 
    <div align="center"></div> 
 

 
    <center> 
 
    <h4 style="color:darkblue">Choose Your Food/Beverage & Quantity : </h3> 
 
    </center> 
 

 
    <table> 
 
    <tr> 
 
     <td> 
 

 
     <font size=2> 
 
      <B>Choose a Food/Beverage : </B> 
 
     </font> 
 

 
     <select ID="foodbeverage"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Food"> 
 
\t <option value = "chickenchop">Chicken Chop</option> 
 
\t <option value = "pasta">Pasta</option> 
 
\t <option value = "pizza">Pizza</option> 
 
\t <option value = "chocolate">Chocolate Cake</option> 
 
\t <option value = "redvelvet">Red Velvet Cake</option> 
 
\t <option value = "icecream">Ice Cream Cake</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Beverages"> 
 
\t <option value = "milk">Milk</option> 
 
\t <option value = "freshjuice">Fresh Juice</option> 
 
\t <option value = "icecream">Ice Cream</option> 
 
\t <option value = "coffee">Coffee</option> 
 
\t <option value = "carbonated">Carbonated Can Drink</option> 
 
\t <option value = "water">Water</option> 
 
\t </optgroup> 
 
\t 
 
\t </select> 
 
     <br/> 
 

 
     <font size=2> 
 
      <B>Choose a Food/Beverage : </B> 
 
     </font> 
 

 
     <select ID="foodbeverage1"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Food"> 
 
\t <option value = "chickenchop">Chicken Chop</option> 
 
\t <option value = "pasta">Pasta</option> 
 
\t <option value = "pizza">Pizza</option> 
 
\t <option value = "chocolate">Chocolate Cake</option> 
 
\t <option value = "redvelvet">Red Velvet Cake</option> 
 
\t <option value = "icecream">Ice Cream Cake</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="Beverages"> 
 
\t <option value = "milk">Milk</option> 
 
\t <option value = "freshjuice">Fresh Juice</option> 
 
\t <option value = "icecream">Ice Cream</option> 
 
\t <option value = "coffee">Coffee</option> 
 
\t <option value = "carbonated">Carbonated Can Drink</option> 
 
\t <option value = "water">Water</option> 
 
\t </optgroup> 
 
\t 
 
\t </select> 
 
     <br/> 
 

 
     </td> 
 

 
     <td> 
 
     <font size=2> 
 
      <B>Dine In or Take Away : </B> 
 
     </font> 
 
     <select ID="status"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="STATUS"> 
 
\t <option value = "dinein">Dine In</option> 
 
\t <option value = "takeaway">Take Away</option> 
 
\t </optgroup> 
 
\t </select> 
 
     <br/> 
 

 
     <font size=2> 
 
      <B>Dine In or Take Away : </B> 
 
     </font> 
 
     <select ID="status1"> 
 
\t 
 
\t <optgroup label="DEFAULT"> 
 
\t <option value = "NONE">NONE</option> 
 
\t </optgroup> 
 
\t 
 
\t <optgroup label="STATUS"> 
 
\t <option value = "dinein">Dine In</option> 
 
\t <option value = "takeaway">Take Away</option> 
 
\t </optgroup> 
 
\t </select> 
 
     <br/> 
 

 
     </td> 
 
    </tr> 
 
    </table> 
 

 

 
    <br/> 
 
    <br/> 
 

 
    <input type="submit" id="btngo" value="Go" /> 
 

 
    <br/> 
 
</body> 
 

 
</html>

這些是下拉選擇的值將被顯示的「newPageTest.html」文件中的代碼。

< script type = "text/javascript" > 
 
    window.onload = passParameters; 
 

 
//Function to update "showdata" div with URL Querystring parameter values 
 
function passParameters() { 
 
    var foodbeverage = getParameterByName("foodbeverage"); 
 
    var status = getParameterByName("status"); 
 
    if (foodbeverage != null && status != null) { 
 
    var data = "<b>Food Beverages:</b> " + foodbeverage + " <b>Dine Takeaway:</b> " + status; 
 
    document.getElementById("showdata").innerHTML = data; 
 
    } 
 
} 
 
//Get URL parameter value 
 
function getParameterByName(name, url) { 
 
    if (!url) url = window.location.href; 
 
    name = name.replace(/[\[\]]/g, "\\$&"); 
 
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), 
 
    results = regex.exec(url); 
 
    if (!results) return null; 
 
    if (!results[2]) return ''; 
 
    return decodeURIComponent(results[2].replace(/\+/g, " ")); 
 
} < 
 
/script>
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 

 

 
    <div id="showdata" align="center"></div> 
 
    <font size=6> 
 
    <B>Food/Beverage Selected : </B> 
 
    </font> 
 

 
    <br/> 
 
    <br/> 
 

 
    <font size=6> 
 
    <B>Dine In/Take Away : </B> 
 
    </font> 
 

 
    <br/> 
 
    <br/> 
 

 

 
</body> 
 

 
</html>

+2

。你甚至閱讀的代碼?我在你之前的問題的第一個片段中做了這個方法,代碼評論甚至說沒有重定向發生。你只是複製粘貼而不看它。 – Thijs

+0

@Thijs很抱歉,我按照你所說的做了,仍然沒有重定向,這些都是你完成的原始代碼。我猜這個問題在別的地方。我試圖在按鈕代碼之間放入

,頁面重定向但沒有值被引用。我無法弄清楚問題出在哪裏 – cerberus99

回答

1

onSubmitClicked方法,你需要:

  • 獲取狀態元素,就像對飲料的元素從DOM檢索
  • 獲取狀態元素的值嘗試之前使用它在encodeURIComponent(status)
  • console.log行中,用代碼,代碼會改變URL。

對於第二頁:

  • 不要使用font標籤,使用CSS來代替。
  • 分配ID的元素要顯示在
  • 飲料和狀態文本檢索DOM喜歡的元素在onSubmitClicked方法
  • 一旦你的元素,你可以做myElement.textContent = <text>顯示的值的頁。
+0

謝謝,夥計。你最好!!!! – cerberus99

+0

我是否需要創建一個數組來顯示下拉列表的第二行?我是否需要爲每個下拉列表分配唯一的ID? – cerberus99

+0

如果我是你,我會首先試着讓它與單一食物平衡和狀態選擇一起工作。一旦你有了,嘗試擴展到多個訂單。 – Thijs

0

您的代碼不隨地重定向。你有這樣的行後添加location.href = url;

url = 'newPageTest.html?foodbeverage=' + encodeURIComponent(beverageValue) + '&status=' + encodeURIComponent(status); 
+0

感謝隊友。意識到我需要更改console.log – cerberus99

相關問題