...

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum