cerberus99 cerberus99 - 2 months ago 13
HTML Question

Multiple Drop Down Values Won't Display In New HTML Page

Below are my codes which allows user to select multiple values from the drop down list and when the user clicks the button 'Go' the selected values will be displayed on the new page. I've also created classes for both attributes in order to list the selected values.

Unfortunately, when the button is clicked after selections, nothing is being displayed. Need help on this.

"mainTest.html" page.



< script type = "text/javascript" >
(function() {
/**
* Handles the click of the submit button.
*/
function onSubmitClicked(event) {
var url = 'newPageTest.html?';
var foodbevs = document.getElementsByClassName('foodbeverage');

for (var i = 0; i < foodbevs.length; i++) {
if (i > 0) url += '&';
url += 'foodbeverage=' + encodeURIComponent(foodbevs[i].value);
}

var statuses = document.getElementsByClassName('status');

for (i = 0; i < statuses.length; i++) {
url += '&status=' + encodeURIComponent(statuses[i].value);
}

location.href = 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>

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

<table>
<tr>
<td>

<B>Choose a Food/Beverage : </B>

<select class="foodbeverage">

<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>

<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>

<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>

</select>
<br/>

<B>Choose a Food/Beverage : </B>

<select class="foodbeverage">

<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>

<optgroup label="Food">
<option value = "Chicken Chop">Chicken Chop</option>
<option value = "Pasta">Pasta</option>
<option value = "Pizza">Pizza</option>
<option value = "Chocolate Cake">Chocolate Cake</option>
<option value = "Red Velvet Cake">Red Velvet Cake</option>
<option value = "Ice Cream Cake">Ice Cream Cake</option>
</optgroup>

<optgroup label="Beverages">
<option value = "Milk">Milk</option>
<option value = "Fresh Juice">Fresh Juice</option>
<option value = "Ice Cream">Ice Cream</option>
<option value = "Coffee">Coffee</option>
<option value = "Carbonated Can Drink">Carbonated Can Drink</option>
<option value = "Water">Water</option>
</optgroup>

</select>
<br/>

</td>

<td>
<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>

<B>Dine In or Take Away : </B>
<select class="status">
<optgroup label="DEFAULT">
<option value = "NONE">NONE</option>
</optgroup>
<optgroup label="Status">
<option value = "Dine In">Dine In</option>
<option value = "Take Away">Take Away</option>
</optgroup>
</select>
<br/>
</td>
</tr>
</table>
<br/>
<br/>

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

<br/>


</body>

</html>





"newPageTest.html" page.



< script type = "text/javascript" >

function parseQuery(str) {
if (typeof str != "string" || str.length == 0) return {};
var s = str.split("&");
var s_length = s.length;
var bit, query = {},
first, second;
for (var i = 0; i < s_length; i++) {
bit = s[i].split("=");
first = decodeURIComponent(bit[0]);
if (first.length == 0) continue;
second = decodeURIComponent(bit[1]);
if (typeof query[first] == "undefined") query[first] = second;
else if (query[first] instanceof Array) query[first].push(second);
else query[first] = [query[first], second];

}
return query;
}

//Function to update "showdata" div with URL Querystring parameter values
function passParameters() {
window.onload = passParameters;
var query = parseQuery(window.location.search);
var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
document.getElementById("showdata").innerHTML = data;
}

<
/script>

<!DOCTYPE html>
<html>

<body>


<div id="showdata"></div>

</body>

</html>




Answer Source

I find 2 mistake from your code.

  1. Put the window.onload = passParameters; outside of your passParameters function.

For example:

function passParameters() {
  var query = parseQuery(window.location.search);
  var data = "<b>Food Beverages:</b> " + query.foodbeverage + " <b>Dine/Takeaway:</b> " + query.status;
  document.getElementById("showdata").innerHTML = data;
}
window.onload = passParameters;
  1. The parseQuery return {"?foodbeverage":"Chicken Chop","foodbeverage":"Pasta","status":["Dine In","Take Away"]} from input query ?foodbeverage=Chicken%20Chop&foodbeverage=Pasta&status=Dine%20In&status=Take%20Away

You may want to add str = str.substr(1); before var s = str.split("&");

For example

  function parseQuery(str) {
    if (typeof str != "string" || str.length == 0) return {};
    str = str.substr(1);
    var s = str.split("&");
    var s_length = s.length;
    var bit, query = {},
      first, second;
    for (var i = 0; i < s_length; i++) {
      bit = s[i].split("=");
      first = decodeURIComponent(bit[0]);
      if (first.length == 0) continue;
      second = decodeURIComponent(bit[1]);
      if (typeof query[first] == "undefined") query[first] = second;
      else if (query[first] instanceof Array) query[first].push(second);
      else query[first] = [query[first], second];

    }
    return query;
  }