在警报框中显示复选框值

时间：2015-05-27 00:29:47

标签： javascript jquery html validation checkbox

我正在完成一项任务并且遇到了障碍。

我尝试在提交后在警告框弹出屏幕中显示顶部的复选框值。出现文本框和单选格值，但复选框返回空值。

知道我做错了吗？

＆＃13;
＆＃13; 
<html>
<head>
<title>HTML and JavaScript</title>
<script>
function doClear()
{
	document.PizzaForm.customer.value ="";
	document.PizzaForm.address.value = "";
	document.PizzaForm.city.value = "";
	document.PizzaForm.state.value="";
	document.PizzaForm.zip.value="";
	document.PizzaForm.phone.value="";
	document.PizzaForm.email.value="";
	
	document.PizzaForm.sizes[0].checked = false;
	document.PizzaForm.sizes[1].checked = false;
	document.PizzaForm.sizes[2].checked = false;
	document.PizzaForm.sizes[3].checked = false;
	
	document.PizzaForm.toppings[0].checked = false;
	document.PizzaForm.toppings[1].checked = false;
	document.PizzaForm.toppings[2].checked = false;
	document.PizzaForm.toppings[3].checked = false;
	document.PizzaForm.toppings[4].checked = false;
	document.PizzaForm.toppings[5].checked = false;
	document.PizzaForm.toppings[6].checked = false;
	document.PizzaForm.toppings[7].checked = false;
	document.PizzaForm.toppings[8].checked = false;
	return;
}

function doSubmit()
{
	if(validateText() == true);
	if(validateRadio() == true);
	if(validateCheck() == true);
	
	alert("Name:" + " " + document.PizzaForm.customer.value + 
		  '\n' + 
		  "Address:" + " " + document.PizzaForm.address.value + 
		  '\n' +
		  "City:" + " " + document.PizzaForm.city.value +
		  '\n' +
		  "State:" + " " + document.PizzaForm.state.value +
		  '\n' +
		  "Zip:" + " " + document.PizzaForm.zip.value +
		  '\n' +
		  "Phone:" + " " + document.PizzaForm.phone.value +
		  '\n' +
		  "Email:" + " " + document.PizzaForm.email.value +
		  '\n' +
		  "Size:" + " " + document.PizzaForm.sizes.value +
		  '\n' +
		  "Toppings:" + " " + document.PizzaForm.toppings.value);
	return;
}
function validateText()
{
	var customer = document.PizzaForm.customer.value;
	if (customer.length == 0)
	{
		alert("Please enter your name.")
	}
	var address = document.PizzaForm.address.value;
	if (address.length == 0)
	{
		alert("Please enter an address.")
	}
	var city = document.PizzaForm.city.value;
	if (city.length == 0)
	{
		alert("Please enter a city.")
	}
	var state = document.PizzaForm.state.value;
	if (state.length == 0)
	{
		alert("Please enter a state.")
	}
	var zip = document.PizzaForm.zip.value;
	if (zip.length == 0)
	{
		alert("Please enter a zip code.")
	}
	var phone = document.PizzaForm.phone.value;
	if (phone.length == 0)
	{
		alert("Please enter a phone number.")
	}
	var email = document.PizzaForm.email.value;
	    atpos = email.indexOf("@");
		dotpos = email.lastIndexOf(".");
	if (atpos < 1 || ( dotpos - atpos < 2 ))
	{
		alert("Please enter an email address.")
		return false;
	}
		return true;
}

function validateRadio()
{
	if (document.PizzaForm.sizes[0].checked) return true;
	if (document.PizzaForm.sizes[1].checked) return true;
	if (document.PizzaForm.sizes[2].checked) return true;
	if (document.PizzaForm.sizes[3].checked) return true;
	if (document.PizzaForm.sizes.value == false);
	{
		alert("Please choose a pizza size.");
	}
	return;
}

function validateCheck()
{
	if (document.PizzaForm.toppings[0].checked == false &&
		document.PizzaForm.toppings[1].checked == false &&
		document.PizzaForm.toppings[2].checked == false &&
		document.PizzaForm.toppings[3].checked == false &&
		document.PizzaForm.toppings[4].checked == false &&
		document.PizzaForm.toppings[5].checked == false &&
		document.PizzaForm.toppings[6].checked == false &&
		document.PizzaForm.toppings[7].checked == false &&
		document.PizzaForm.toppings[8].checked == false)
		{
			alert("Please pick a topping of your choice.");
		}
			return false;
			return true;
}

</script>
</head>

<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

简单的for-loop可以为您节省时间。

<html>
<head>
<title>HTML and JavaScript</title>
<script>
function doClear()
{
    document.PizzaForm.customer.value ="";
    document.PizzaForm.address.value = "";
    document.PizzaForm.city.value = "";
    document.PizzaForm.state.value="";
    document.PizzaForm.zip.value="";
    document.PizzaForm.phone.value="";
    document.PizzaForm.email.value="";

    document.PizzaForm.sizes[0].checked = false;
    document.PizzaForm.sizes[1].checked = false;
    document.PizzaForm.sizes[2].checked = false;
    document.PizzaForm.sizes[3].checked = false;

    document.PizzaForm.toppings[0].checked = false;
    document.PizzaForm.toppings[1].checked = false;
    document.PizzaForm.toppings[2].checked = false;
    document.PizzaForm.toppings[3].checked = false;
    document.PizzaForm.toppings[4].checked = false;
    document.PizzaForm.toppings[5].checked = false;
    document.PizzaForm.toppings[6].checked = false;
    document.PizzaForm.toppings[7].checked = false;
    document.PizzaForm.toppings[8].checked = false;
    return;
}

function doSubmit()
{
    if(validateText() == true);
    if(validateRadio() == true);
    if(validateCheck() == true);

    var toppings = "";
    for(i=0;i<document.PizzaForm.toppings.length;i++){
        if(document.PizzaForm.toppings[i].checked)
            toppings += (i==0?"":",")+document.PizzaForm.toppings[i].value;
    }
    alert("Name:" + " " + document.PizzaForm.customer.value + 
          '\n' + 
          "Address:" + " " + document.PizzaForm.address.value + 
          '\n' +
          "City:" + " " + document.PizzaForm.city.value +
          '\n' +
          "State:" + " " + document.PizzaForm.state.value +
          '\n' +
          "Zip:" + " " + document.PizzaForm.zip.value +
          '\n' +
          "Phone:" + " " + document.PizzaForm.phone.value +
          '\n' +
          "Email:" + " " + document.PizzaForm.email.value +
          '\n' +
          "Size:" + " " + document.PizzaForm.sizes.value +
          '\n' +
          "Toppings:" + " " + toppings);
    return;
}
function validateText()
{
    var customer = document.PizzaForm.customer.value;
    if (customer.length == 0)
    {
        alert("Please enter your name.")
    }
    var address = document.PizzaForm.address.value;
    if (address.length == 0)
    {
        alert("Please enter an address.")
    }
    var city = document.PizzaForm.city.value;
    if (city.length == 0)
    {
        alert("Please enter a city.")
    }
    var state = document.PizzaForm.state.value;
    if (state.length == 0)
    {
        alert("Please enter a state.")
    }
    var zip = document.PizzaForm.zip.value;
    if (zip.length == 0)
    {
        alert("Please enter a zip code.")
    }
    var phone = document.PizzaForm.phone.value;
    if (phone.length == 0)
    {
        alert("Please enter a phone number.")
    }
    var email = document.PizzaForm.email.value;
        atpos = email.indexOf("@");
        dotpos = email.lastIndexOf(".");
    if (atpos < 1 || ( dotpos - atpos < 2 ))
    {
        alert("Please enter an email address.")
        return false;
    }
        return true;
}

function validateRadio()
{
    if (document.PizzaForm.sizes[0].checked) return true;
    if (document.PizzaForm.sizes[1].checked) return true;
    if (document.PizzaForm.sizes[2].checked) return true;
    if (document.PizzaForm.sizes[3].checked) return true;
    if (document.PizzaForm.sizes.value == false);
    {
        alert("Please choose a pizza size.");
    }
    return;
}

function validateCheck()
{
    if (document.PizzaForm.toppings[0].checked == false &&
        document.PizzaForm.toppings[1].checked == false &&
        document.PizzaForm.toppings[2].checked == false &&
        document.PizzaForm.toppings[3].checked == false &&
        document.PizzaForm.toppings[4].checked == false &&
        document.PizzaForm.toppings[5].checked == false &&
        document.PizzaForm.toppings[6].checked == false &&
        document.PizzaForm.toppings[7].checked == false &&
        document.PizzaForm.toppings[8].checked == false)
        {
            alert("Please pick a topping of your choice.");
        }
            return false;
            return true;
}

</script>
</head>

<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="button" value="Clear Entries" onClick="doClear()">
</form>
</body>

</html>

doClear（）函数实际上是不必要的，因为你可以制作＆＃34; Clear Entries＆＃34;按钮类型=＆＃34;重置＆＃34;做同样的事情。

此外，熟悉for循环后，您可以按以下方式优化代码：

<html>
<head>
<title>HTML and JavaScript</title>
<script>
function doSubmit()
{
    // validate the fields
    if( ! (validateText() && validateRadio() && validateCheck()) ) return false;

    // generate the box message
    var fields=["customer", "address", "city", "state", "zip", "phone", "email","sizes"];
    var fieldNames=["Name", "Address", "City", "State", "Zip", "Phone", "Email","Size"];
    var msg = "";
    for(i=0;i<fields.length;i++)
        msg += fieldNames[i] + ": " + document.PizzaForm[ fields[i] ].value + "\n";
    msg += "Toppings: ";
    for(i=0;i<document.PizzaForm.toppings.length;i++)
        if(document.PizzaForm.toppings[i].checked)
            msg += (i==0?"":",")+document.PizzaForm.toppings[i].value;
    alert(msg);
    return true;
}
function validateText()
{
    var pass=true;
    var fields=["customer", "address", "city", "state", "zip", "phone"];
    var fieldNames=["your name", "an address", "a city", "a state", "a zip code", "a phone number"];
    for(i=0;i<fields.length;i++)
        if(document.PizzaForm[ fields[i] ].value.length == 0){
            alert("Please enter " + fieldNames[i] + ".");
            pass=false;
        }
    var email = document.PizzaForm["email"].value;
    atpos = email.indexOf("@"); dotpos = email.lastIndexOf(".");
    if (atpos < 1 || ( dotpos - atpos < 2 )){alert("Please enter an email address.");pass=false;}
    return pass;
}

function validateRadio()
{
    for(i=0;i<document.PizzaForm.sizes.length;i++)
        if(document.PizzaForm.sizes[i].checked)
            return true;
    alert("Please choose a pizza size.");
    return false;
}

function validateCheck()
{
    for(i=0;i<document.PizzaForm.toppings.length;i++)
        if(document.PizzaForm.toppings[i].checked)
            return true;
    alert("Please pick a topping of your choice.");
    return false;
}

</script>
</head>

<body>
<form name="PizzaForm">
<h1>The JavaScript Pizza Parlor</h1>
<p>
<h4>Step 1: Enter your name, address, and phone number:</h4>
<font face ="Courier New">
Name: &nbsp;&nbsp;&nbsp;<input name="customer" size="50" type="text"><br>
Address: <input name="address" size"50" type="text"><br>
City: &nbsp;&nbsp;&nbsp;<input name="city" size="15" type="text">
State: <input name="state" size="2" type="TEXT">
Zip: <input name="zip" size="5" type="text"><br>
Phone: &nbsp;&nbsp;<input name="phone" size="50" type="text"><br>
Email: &nbsp;&nbsp;<input name="email" size="40" type="text"><br>
</font>
</p>
<p>
<h4>Step 2: Select the size of pizza you want:</h4>
<font face="Courier New">
<input name="sizes" type="radio" value="Small">Small
<input name="sizes" type="radio" value="Medium">Medium
<input name="sizes" type="radio" value="Large">Large
<input name="sizes" type="radio" value="Jumbo">Jumbo<br>
</font>
</p>
<p>
<h4>Step 3: Select the pizza toppings you want:</h4>
<font face="Courier New">
<input name="toppings" type="checkbox" value="Pepperoni">Pepperoni
<input name="toppings" type="checkbox" value="Canadian Bacon">Canadian Bacon
<input name="toppings" type="checkbox" value="Sausage">Sausage<br>
<input name="toppings" type="checkbox" value="Mushrooms">Mushrooms
<input name="toppings" type="checkbox" value="Pineapple">Pineapple
<input name="toppings" type="checkbox" value="Black Olives">Black Olives<br>
<input name="toppings" type="checkbox" value="Green Peppers">Green Peppers
<input name="toppings" type="checkbox" value="Extra Cheese">Extra Cheese
<input name="toppings" type="checkbox" value="None">None<br>
</font>
</p>
<input type="button" value="Submit Order" onClick="doSubmit()">
<input type="reset" value="Clear Entries">
</form>
</body>

</html>
相关问题
最新问题