我正在为我的javascript项目做一个披萨店3页模拟网站。当信息不存在时，我试图让它保持在同一页面上。我有一个由提交按钮中的onClick事件触发的函数，如果未选中单选按钮则会发出警报，并设置cookie并将它们传递到下一页，但我希望它保留在同一页面上以便用户可以填写信息，然后提交订单。我尝试过location.reload方法，以及url重定向。我们没有在课堂上讨论这些，所以我完全可以写错误。我也不知道是否必须托管这些才能使这些工作，因为它仍然只是我桌面上的文件。 有人可以发一个如何实现这个目标的例子吗？我把我的代码放在下面：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Pizza Parlor</title>
<link rel="stylesheet" type="text/css" media="all" href="pizzaParlor.css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="pizzaParlor.js"></script>
<script type="text/javascript">
//<!--
var message = "";
//SetCookie("cat","dog");
//alert(GetCookie("cat"));
// Here are 2 ways you could setup the javascript to handle this.
// Lets setup our order in an Array
/*
* index - Description of what it holds.
* 0 - Size of Pizza
* 1 - Crust type
* 2 - Type of pizza
* 3 - Array of toppings.
*/
var order = new Array(" "," "," ");
var sale = new Array(0,0,0);
var total = 0;
var tax = 0;
var grandtotal = 0;
//Another way would be to create an order object.
/* -----------------------------------------------------
* name: isSpecialty()
* purpose: Checks Pizza Type.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function isSpecialty(){
if(jquery("input:radio[name=custom]:checked").val() == "Hawiian"){
order[3] = false;
return true;
} else if($("input:radio[name=custom]:checked").val() == "Veggie") {
order[3] = false;
return true;
} else if($("input:radio[name=custom]:checked").val() == "MeatLovers") {
order[3] = false;
return true;
} else {
// Is Custom
order[3] = true;
return false;
} // end if else
} // end function isSpecialty()
/* -----------------------------------------------------
* name: addSize()
* purpose: Checks Pizza Type.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function addSize(){
if($("input:radio[name=size]:checked").val() == "12"){
order[0] = "12 inch pie";
} else if($("input:radio[name=size]:checked").val() == "16"){
order[0] = "16 inch pie";
} else if($("input:radio[name=size]:checked").val() == "20"){
order[0] = "20 inch pie";
} // end if else
if($("input:radio[name=size]:checked").val() == "12"){
sale[0] = 10;
} else if($("input:radio[name=size]:checked").val() == "16"){
sale[0] = 12;
} else if($("input:radio[name=size]:checked").val() == "20"){
sale[0] = 14;
} // end if else
updateDisplay();
} // end function addSize()
/* -----------------------------------------------------
* name: addCrust()
* purpose: Checks Pizza Type.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function addCrust(){
if($("input:radio[name=crust]:checked").val() == "Hand-Tossed"){
order[1] = "Hand-Tossed";
} else if($("input:radio[name=crust]:checked").val() == "Deep Dish"){
order[1] = "Deep Dish";
} // end if else
if($("input:radio[name=crust]:checked").val() == "Hand-Tossed"){
sale[1] = 1;
} else if($("input:radio[name=crust]:checked").val() == "Deep Dish"){
sale[1] = 2;
} // end if else
updateDisplay();
} // end function addCrust()
/* -----------------------------------------------------
* name: addType()
* purpose: Adds Pizza Type: Specialty(Hawiian, Veggie, Meat Lovers) or Custom.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function addType(){
if($("input:radio[name=custom]:checked").val() == "Hawiian"){
// put your code here for disabling the topping checkboxes of custom.
// Maybe call a function which disables those Elements of the form.
disableTop();
order[2] = "Hawiian";
sale[2] = 1;
} else if($("input:radio[name=custom]:checked").val() == "Veggie"){
// put your code here for disabling the topping checkboxes of custom.
// Maybe call a function which disables those Elements of the form.
disableTop();
order[2] = "Veggie";
sale[2] = 1;
} else if($("input:radio[name=custom]:checked").val() == "MeatLovers"){
// put your code here for disabling the topping checkboxes of custom.
// Maybe call a function which disables those Elements of the form.
disableTop();
order[2] = "Meat Lovers";
sale[2] = 2;
} else if($("input:radio[name=custom]:checked").val() == "BuildYourOwn"){
// put your code here for enable the topping checkboxes of custom.
// Maybe call a function which enables those Elements of the form.
enableTop();
order[2] = "Build Your Own";
sale[2] = 0;
if ($("input:checkbox[id=top01]:checked").val() == "Pineapple"){
sale[2] = sale[2]+.50;
}
if ($("input:checkbox[id=top02]:checked").val() == "Chicken"){
sale[2] = sale[2]+.50;
}
if ($("input:checkbox[id=top03]:checked").val() == "Canadian Bacon"){
sale[2] = sale[2]+.50;
}
if ($("input:checkbox[id=top04]:checked").val() == "Sausage"){
sale[2] = sale[2]+.50;
}
if ($("input:checkbox[id=top05]:checked").val() == "Pepperoni"){
sale[2] = sale[2]+.50;
}
if ($("input:checkbox[id=top06]:checked").val() == "Tomatoes"){
sale[2] = sale[2]+.50;
}
}// end if else
updateDisplay();
} // end function addCrust()
function disableTop(){
// JavaScript
document.getElementById('top01').disabled = true;
document.getElementById('top02').disabled = true;
document.getElementById('top03').disabled = true;
//$('#top01').attr("disabled", true);
//$('#top02').attr("disabled", true);
//$('#top03').attr("disabled", true);
// jQuery
$('#top04').attr("disabled", true);
$('#top05').attr("disabled", true);
$('#top06').attr("disabled", true);
$('#tbltop').addClass('disabled');
} // end function disableTop()
function enableTop(){
$('#top01').attr("disabled", false);
$('#top02').attr("disabled", false);
$('#top03').attr("disabled", false);
$('#top04').attr("disabled", false);
$('#top05').attr("disabled", false);
$('#top06').attr("disabled", false);
$('#tbltop').removeClass('disabled');
} // end function enableTop()
/* -----------------------------------------------------
* name: updateDisplay()
* purpose: Updates the shopping cart with any changes in order.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function updateDisplay(){
//alert("updateDisplay was called");
//alert(order[0]);
$('#messages').text("");
total = 0;
for(var i = 0; i < order.length; i++){
$('#messages').append(order[i] + " $" + sale[i] + "<br />");
total = total + sale[i];
} // end for loop
tax = total*.09;
grandtotal = total + tax;
$('#messages').append("Subtotal $" + total + "<br /><br />");
$('#messages').append("Tax $" + tax + "<br /><br />");
$('#messages').append("Total $" + grandtotal + "<br /><br />");
} // end function updateDisplay()
/* -----------------------------------------------------
* name: clearDisplay()
* purpose: Clears the shopping cart display.
* author: Eric Collins
* date: 03/03/2014
* parameters: none
*/
function clearDisplay(){
$('#tbltop').removeClass('disabled');
$('#messages').text("");
for(var i = 0; i < order.length; i ++){
order[i] = " ";
sale[i] = " ";
} // end for loop
} // end function clearDisplay()
//validate radio function(check to see if this is ness, if page one has a form, otherwise you will have to do this different.)
function validateRadio(){
if (document.shopcart.size[0].checked) return true;
if (document.shopcart.size[1].checked) return true;
if (document.shopcart.size[2].checked) return true;
if (document.shopcart.crust[0].checked) return true;
if (document.shopcart.crust[1].checked) return true;
//if (document.shopcart.custom[0].checked) return true;
//if (document.shopcart.custom[1].checked) return true;
return false;
}
/* -----------------------------------------------------
* name: yumCookies()
* purpose: Places form data in cookies.
* author: Eric Collins
* date: 03/12/2014
* parameters: none
*/
function yumCookies(){
var pizzaSize = order[0];
var pizzaCrust = order[1];
var pizzaType = order[2];
if (validateRadio() == false)
{
alert("Please make your pizza choice selections and try again");
return;
}
alert("Fill out your information and submit it to finish your pizza order");
return;
SetCookie("pizSZ", pizzaSize);
SetCookie("pizzaCRST", pizzaCrust);
SetCookie("pizzaTyp", pizzaType);
SetCookie("saleSZ", sale[0]);
SetCookie("saleCRST", sale[1]);
SetCookie("saleTyp", sale[2]);
//alert(GetCookie("pizSZ"));
//alert(GetCookie("pizzaCRST"));
//alert(GetCookie("pizzaTyp"));
if (validateRadio() == false)
{
location.reload;
}
}; // end function yumCookies()
//-->
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div id="header" class="header">
<img src="images/pizzaParlorLogo.png" alt="LogoImage" height="100" width="150" style="float: left;" />
<h1>Josh's Pizza Parlor</h1>
<span style="text-align: right;">(425) 555-1212</span><br />
<span style="text-align: right;">555 5th Ave</span><br />
<span style="text-align: right;">Everett, WA 98203</span>
</div>
<!-- horizontal menu -->
<div id="horizontalMenu" style="text-align: center; font-size: 10px;">
<a href="index.html">Home</a>
<a href="custInfo.html">Customer Info</a>
<a href="summary.html">Order Summary</a>
</div>
<!-- horizontal menu -->
<br />
<div id="content" class="main">
<div id="center" class="yourOrder">
<h2>Create your Order</h2>
<hr />
<form name="shopcart" action="custInfo.html" method="post">
<span style="color: white;">Select your pizza size:</span>
<input type="radio" name="size" value="12" class="pieSize" onclick="addSize()" /> 12"
<input type="radio" name="size" value="16" class="pieSize" onclick="addSize()" /> 16"
<input type="radio" name="size" value="20" class="pieSize" onclick="addSize()" /> 20"
<hr />
<span style="color: white;">Select your crust type:</span>
<input type="radio" name="crust" value="Hand-Tossed" onclick="addCrust()" /> Hand-tossed
<input type="radio" name="crust" value="Deep Dish" onclick="addCrust()" /> Deep dish
<hr />
<span style="color: white;">Build your own:</span>
<input type="radio" name="custom" value="BuildYourOwn" onclick="addType()" /> Custom<br />
<br />
<table id="tbltop">
<tbody>
<tr>
<td><input type="checkbox" id="top01" name="topping" value="Pineapple" onclick="addType()"/> Pineapple</td>
<td><input type="checkbox" id="top02" name="topping" value="Chicken" onclick="addType()"/> Chicken</td>
<td><input type="checkbox" id="top03" name="topping" value="Canadian Bacon" onclick="addType()"/> Canadian Bacon</td>
</tr>
<tr>
<td><input type="checkbox" id="top04" name="topping" value="Sausage" onclick="addType()"/> Sausage</td>
<td><input type="checkbox" id="top05" name="topping" value="Pepperoni" onclick="addType()"/> Pepperoni</td>
<td><input type="checkbox" id="top06" name="topping" value="Tomatoes" onclick="addType()"/> Tomatoes</td>
</tr>
</tbody>
</table>
<br />
<table>
<tbody>
<tr>
<td colspan="2" style="color: white;">
Or Select from one of our speciality pizza
</td>
<td><input type="radio" name="custom" value="Hawiian" onclick="addType()" /> Hawiian</td>
</tr>
<tr>
<td colspan="2"> </td>
<td><input type="radio" name="custom" value="Veggie" onclick="addType()" /> Veggie</td>
</tr>
<tr>
<td colspan="2"> </td>
<td><input type="radio" name="custom" value="MeatLovers" onclick="addType()" /> Meat Lovers</td>
</tr>
</tbody>
</table>
<br /><br />
<table>
<tr>
<td><input type="submit" name="submit" value="submit" onclick="yumCookies()" /></td>
<td><input type="reset" name="reset" value="reset" onclick="clearDisplay()" /></td>
</tr>
</table>
</form>
</div>
<div id="rightSidebar" class="shoppingCart">
<h2>Shopping Cart</h2>
<div id="messages"> </div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
为此目的使用event.stopPropgation()和return false。并将yumCookies()与onclick()事件一起返回
<强> HTML
<input type="submit" name="submit" value="submit" onclick="return yumCookies(event)" />
<强>的javaScript
function yumCookies(event){
var pizzaSize = order[0];
var pizzaCrust = order[1];
var pizzaType = order[2];
if (validateRadio() == false){
alert("Please make your pizza choice selections and try again");
event.stopPropagation();
return false;
}
.......
.......
}