PDA

View Full Version : Why cant I get my output into the text box and to have a confirmation alert?



deed
10-03-2012, 08:38 AM
[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
<h1>
Pizzeria</h1>
<p>
&nbsp;</p>
<p>
<b>Name:</b>&nbsp;
<input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Pickup:</b>
<input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
<input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
<p>
<!-- create ddl for style and size-->
<!-- make ddl have a set value-->
<b>Style:</b> &nbsp; &nbsp;
<select id="ddlStyle">
<option selected="selected">Choose Style</option>
<option value="empty"></option>
<option value="deepDish">Deep Dish</option>
<option value="TomatoPie">Tomato Pie</option>
<option value="ThinCrust">Thin Crust</option>
<option value="Stuffed Crust">Stuffed Crust</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
<select id="ddlSize">
<option selected="selected">Choose Size</option>
<option value="empty"></option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">Xtra Large</option>
<!-- <option value="other">Other value</option>-->
</select></p>
<p>
<!-- Toppings:
<select id="investment1" <optgroup="" label="" name="investment0">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</select></p>-->
<p>
<b>Toppings: </b>&nbsp; <b>&nbsp;Pepperoni: </b>
<input id="chkPepperoni" type="checkbox" /><b> Black Olives: </b>
<input id="chkBlkOlives" type="checkbox" />
<b>Meatballs: </b>
<input id="chkMeatball" type="checkbox" /><b> Sausage: </b>
<input id="chkSausage" type="checkbox" /></p>
<p>
&nbsp;</p>
<p>
&nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
<!-- //does this work? -->
<p>
<textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
<p>
&nbsp;</p>
<script language="javascript" type="text/javascript">


var $ = function (id) {
return document.getElementById(id);

}

function () {

//get buttons and assign a funtion to its onclick

$("btnConfirmOrder").onclick = ConfirmOrder;

$("btnClrFrm").onclick = ClrFrm;


}
function ConfirmOrder() {

//alert
var message = "You have ordered the following:\n\n";

//test the toppings checkboxes
//display the checked toppings in textbox

if ($("chkPepperoni").checked) {
message +=


" - " + $("chkPepperoni").value + "\n";
}


else if ($("chkBlkOlives").checked) {
message +=

" - " + $("chkBlkOlives").value + "\n";
}
else if ($("chkMeatball").checked) {
message +=

" - " + $("chkMeatball").value + "\n";
}
else if ($("chkSausage").checked) {
message +=

" - " + $("chkSausage").value + "\n";
}

//confirm to user what they have accepted
//confirm(message)


$("txtArea").value = message;

}




}











</script>
<!--</body>-->
</html>


[CODE]


I am trying to get every thing entered into a text box at the bottom with a confirmation alert, also for the clear button to work. I cant figure out why it's not working!!!!

shyagrawal
10-03-2012, 08:57 AM
Please add onclick event on input type of Confirmed Order. Your input statement should look like <input id="btnConfirmOrder" type="button" value="Confirm Order" onclick="ConfirmOrder();"/>. You also need to remove one extra closing parenthesis from the function ConfirmOrder() to remove javascript error. I am also placing the updated code. You are not getting oder name because you have not added "value" parameter in the <input id="chkPepperoni" type="checkbox" /><b> Black Olives: </b>.

deed
10-03-2012, 10:32 AM
Thanks for your help, but it didn't work :(

shyagrawal
10-03-2012, 10:43 AM
Please use below code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--< html xmlns="http://www.w3.org/1999/xhtml"> -->
<h1>
Pizzeria</h1>
<p>
&nbsp;</p>
<p>
<b>Name:</b>&nbsp;
<input id="txtName" type="text" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Pickup:</b>
<input id="rdbPickUp" name="DeliveryMethod" type="radio" value="PickUp" />&nbsp;&nbsp;&nbsp;<b>Delivery:</b>
<input id="rdbDelivery" name="DeliveryMethod" type="radio" value="Delivery" /></p>
<p>
<!-- create ddl for style and size-->
<!-- make ddl have a set value-->
<b>Style:</b> &nbsp; &nbsp;
<select id="ddlStyle">
<option selected="selected">Choose Style</option>
<option value="empty"></option>
<option value="deepDish">Deep Dish</option>
<option value="TomatoPie">Tomato Pie</option>
<option value="ThinCrust">Thin Crust</option>
<option value="Stuffed Crust">Stuffed Crust</option>
</select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <b>Size:</b>
<select id="ddlSize">
<option selected="selected">Choose Size</option>
<option value="empty"></option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XLarge">Xtra Large</option>
<!-- <option value="other">Other value</option>-->
</select></p>
<p>
<!-- Toppings:
<select id="investment1" <optgroup="" label="" name="investment0">
<option value="1000">$1,000</option>
<option value="5000">$5,000</option>
<option value="10000">$10,000</option>
<option value="25000">$25,000</option>
<option value="other">Other value</option>
</select></p>-->
<p>
<b>Toppings: </b>&nbsp; <input id="chkPepperoni" type="checkbox" value="Pepperoni"/><b>&nbsp;Pepperoni: </b>
<input id="chkBlkOlives" type="checkbox" value="Black Olives"/><b> Black Olives: </b>
<input id="chkMeatball" type="checkbox" value="Meatballs"/><b>Meatballs: </b>
<input id="chkSausage" type="checkbox" value="Sausage"/><b> Sausage: </b>

<p>
&nbsp;</p>
<p>
&nbsp;<input id="btnConfirmOrder" type="button" value="Confirm Order" onclick="ConfirmOrder();"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp;&nbsp;
<input id="btnClrFrm" type="button" value="Clear Form" onclick="this.form.reset()" /></p>
<!-- //does this work? -->
<p>
<textarea id="txtArea" rows='10' cols='40' disabled='disabled'></textarea></p>
<p>
&nbsp;</p>
<script language="javascript" type="text/javascript">


var $ = function (id) {
return document.getElementById(id);

}

function () {

//get buttons and assign a funtion to its onclick

$("btnConfirmOrder").onclick = ConfirmOrder;

$("btnClrFrm").onclick = ClrFrm;


}
function ConfirmOrder() {

//alert
var message = "You have ordered the following:\n\n";

//test the toppings checkboxes
//display the checked toppings in textbox

if ($("chkPepperoni").checked) {
message +=" - " + $("chkPepperoni").value + "\n";
}
if ($("chkBlkOlives").checked) {
message +=" - " + $("chkBlkOlives").value + "\n";
}
if ($("chkMeatball").checked) {
message +=" - " + $("chkMeatball").value + "\n";
}
if ($("chkSausage").checked) {
message +=" - " + $("chkSausage").value + "\n";
}

//confirm to user what they have accepted
//confirm(message)

$("txtArea").value = message;

}

</script>
<!--</body>-->
</html>

deed
10-03-2012, 11:32 AM
I'm just going to abandon this whole route. My hw is so simple yet it's taking me hours and hours to figure out. ugh