cerberus99 cerberus99 - 2 months ago 14
HTML Question

Can't Seem To Display Drop Down Value

The codes below indicate that the drop down value selected from the both drop down list will be redirected or referred to the another HTML page. I've got the first one done but I couldn't redirect the value from the 'Status' drop down menu. Need help on this one. Preferred language : Javascript & HTML.

This is the 'mainTest.html' page where the drop down list will be displayed/selected.



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, " "));
}

<!DOCTYPE html>
<html>

<body>


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

</body>

</html>





This is the 'newPageTest.html' page where the drop down lists' value selected will be displayed.



(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.
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);
})();

<!DOCTYPE html>
<html>

<body>

<div align="center">

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

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

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

<select ID="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>
<font size=2>
<B>Dine In or Take Away : </B>
</font>
<select ID="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/>


<font size=2>
<B>Dine In or Take Away : </B>
</font>
<select ID="status1">

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




Answer Source

Do this and this will works

var beverage = document.getElementById('foodbeverage'), status = document.getElementById('status') 

beverageValue = beverage.value, status = status.value,

the thing is that the sstatus variable is not intialized