显示警报消息中选中的复选框和单选按钮及其总计的值

Question

在这里的人们的帮助下，我几乎想出了我的整个系统。现在唯一困扰我的是如何显示所选复选框和单选按钮的名称和值以及它们位于html下方文本框中的总数。我对复选框和单选按钮的验证是正确的，但由于某种原因，当我将它们放在finalVal（）函数上时，整个系统将无法工作。我不知道该怎么做才能解决这个问题。

这是我的HTML：

<h2>We'd Like to Know More About You!</h2>
<form name="info">
Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "name" placeholder="Enter a valid name">*</br></br>
Address: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "address" placeholder="Enter a valid address"></br></br>
Email Address: &nbsp <input type="email" id = "inf" name="email" placeholder="Enter a valid email address">*</br></br>
Phone Number: &nbsp <input type = "tel" id = "inf" name ="PN"  placeholder="Enter a valid phone number">*</br></br>
<hr/> 
</form>

<h2>What Kind of Burger Would You Like to Order?</h2>
<form name ="burgz">

Add-ons <br/>
&nbsp &nbsp <input type="checkbox" name="AO"  value="45" onchange="calculate(this);">Bacon - 45
&nbsp &nbsp <input type="checkbox" name="AO"  value="40" onchange="calculate(this);">Sausage - 40
&nbsp &nbsp <input type="checkbox" name="AO"  value="30" onchange="calculate(this);">Ham - 30
&nbsp &nbsp <input type="checkbox" name="AO"  value="10" onchange="calculate(this);">Tomatoes - 10
&nbsp &nbsp <input type="checkbox" name="AO"  value="3" onchange="calculate(this);">Peppers - 3
&nbsp &nbsp <input type="checkbox" name="AO"  value="5" onchange="calculate(this);">Olives - 5
&nbsp &nbsp <input type="checkbox" name="AO"  value="15" onchange="calculate(this);">Extra Cheese - 15
<br/>


Size<br/>
&nbsp &nbsp <input type="radio" name="size"  value="10" onchange="calculate(this);">Small - 10
&nbsp &nbsp <input type="radio" name="size" value="20" onchange="calculate(this);">Medium - 20
&nbsp &nbsp <input type="radio" name="size" value="30" onchange="calculate(this);">Large - 30
<input type="hidden" name="size">
<br/>


Shape<br/>
&nbsp &nbsp <input type="radio" name="shape" value="15" onchange="calculate(this);">Round - 15
&nbsp &nbsp <input type="radio" name="shape" value="10" onchange="calculate(this);">Square - 10
<input type="hidden" name="shape">
<br/>

<p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p>
<input type = "button" onClick = "displayInfo()" value ="Submit Info">
</form>
</body>

这是我的Javascript：

<script type = "text/javascript">

///////////validations
function ValEntry(){
    var valid = true;

    if ( document.info.name.value== ""||document.info.address.value== ""||document.info.email.value== ""||document.info.PN.value == "" )
    {
        alert ( "Please fill up the remaining text boxes" );
        valid = false;
    }
    return valid;
}

function checkemail(){
    var testresults1
    var str=document.info.email.value
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

    if (filter.test(str))
    testresults1=true
    else{
    alert("Please input a valid email address!")
    testresults1=false
    }
return (testresults1)
}

function checkphone(){
    var testresults2
    var int = document.info.PN.value
    var filter2= /[1-9]/g;

    if (filter2.test(int))
    testresults2=true
    else{
    alert("Please input a valid phone number!")
    testresults2=false
}
return (testresults2)
}

function validate(){
    if (document.info.email.value)
    return checkemail()
    else{
    return true
    }       
}

function validate2(){
    if (document.info.PN.value)
    return checkphone()
    else{
    return true
    }       
}

function validateCheck()
{
    if (document.burgz.AO[0].checked == false &&
        document.burgz.AO[1].checked == false &&
        document.burgz.AO[2].checked == false &&
        document.burgz.AO[3].checked == false &&
        document.burgz.AO[4].checked == false &&
        document.burgz.AO[5].checked == false &&
        document.burgz.AO[6].checked == false)
        {
            alert("Please pick any add-ons of your choice.");

        }
        return false;
        return true;

}


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

    }
        return;
}
function validateRadio2()
{
    if (document.burgz.shape[0].checked) return true;
    if (document.burgz.shape[1].checked) return true;
    if (document.burgz.shape.value == false);
    {
        alert("Please choose a shape.");

    }
        return;
}



function FinalVal(){
    return ValEntry() && validate() && validate2();

}


///////////auto-total 

var lastSizeVal = 0;
var lastShapeVal = 0;

function calculate(input) {
    var total = parseInt(burgz.total_price.value);
    var value = parseInt(input.value);

    if (input.type === 'radio') {
        if (input.name === 'size') {
            total -= lastSizeVal;
            lastSizeVal = value;
        }
        else {
            total -= lastShapeVal;
            lastShapeVal = value;
        }
    }

    if (input.checked)
        burgz.total_price.value = total + value
    else
        burgz.total_price.value = total - value;
}


////////////Display information


function displayInfo(){
if (FinalVal()) 

    {
        var fields=["name", "address", "email", "PN"];
        var fieldNames=["Name", "Address", "Email Address", "Phone Number"];
        var msg = "";

        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.info[ fields[i] ].value + "\n";


        alert(msg);
    }
    return true;
}

</script>

Answer 1

如果条件：

，则使用FinalVal函数

function displayInfo(){
    if (FinalVal()) {
        var fields=["name", "address", "email", "PN"];
        var fieldNames=["Name", "Address", "Email Address", "Phone Number"];
        var msg = "";
        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.info[ fields[i] ].value + "\n";
        alert(msg);
    }
    return true;
}

这意味着如果FinalVal函数返回任何假值，则不会执行条件并且不会显示警报。 现在，如果您将所有验证添加到您的函数中，它将看起来像这样：

function FinalVal(){
    return ValEntry() && validate() && validate2() && validateRadio() && validateRadio2() && validateCheck();
}

但是你的validateCheck或validateRadio函数总是返回undefined（请记住，没有值的简单return返回undefined，这是伪值）。 要解决此问题，请更改验证函数，以便显式返回true或false值，如下所示：

＆＃13;

＆＃13;

///////////validations
function ValEntry(){
    var valid = true;

    if ( document.info.name.value== ""||document.info.address.value== ""||document.info.email.value== ""||document.info.PN.value == "" )
    {
        alert ( "Please fill up the remaining text boxes" );
        valid = false;
    }
    return valid;
}

function checkemail(){
    var testresults1
    var str=document.info.email.value
    var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i

    if (filter.test(str))
    testresults1=true
    else{
    alert("Please input a valid email address!")
    testresults1=false
    }
return (testresults1)
}

function checkphone(){
    var testresults2
    var int = document.info.PN.value
    var filter2= /[1-9]/g;

    if (filter2.test(int))
    testresults2=true
    else{
    alert("Please input a valid phone number!")
    testresults2=false
}
return (testresults2)
}

function validate(){
    if (document.info.email.value)
    return checkemail()
    else{
    return true
    }       
}

function validate2(){
    if (document.info.PN.value)
    return checkphone()
    else{
    return true
    }       
}

    function validateCheck()
    {
        if (document.burgz.AO[0].checked == false &&
            document.burgz.AO[1].checked == false &&
            document.burgz.AO[2].checked == false &&
            document.burgz.AO[3].checked == false &&
            document.burgz.AO[4].checked == false &&
            document.burgz.AO[5].checked == false &&
            document.burgz.AO[6].checked == false)
            {
                alert("Please pick any add-ons of your choice.");
                return false;
            } else {
                return true;
            }

    }


    function validateRadio()
    {
        if (document.burgz.size[0].checked) return true;
        if (document.burgz.size[1].checked) return true;
        if (document.burgz.size[2].checked) return true;
        if (document.burgz.size.value == false)
        {
            alert("Please choose a size.");
            return false;
        } else {
            return true;
        }
    }
    function validateRadio2()
    {
        if (document.burgz.shape[0].checked) return true;
        if (document.burgz.shape[1].checked) return true;
        if (document.burgz.shape.value == false)
        {
            alert("Please choose a shape.");
            return false;
        } else {
            return true;
        }
    }



function FinalVal(){
    return ValEntry() && validate() && validate2() && validateRadio() && validateRadio2() && validateCheck();

}


///////////auto-total 

var lastSizeVal = 0;
var lastShapeVal = 0;

function calculate(input) {
    var total = parseInt(burgz.total_price.value);
    var value = parseInt(input.value);

    if (input.type === 'radio') {
        if (input.name === 'size') {
            total -= lastSizeVal;
            lastSizeVal = value;
        }
        else {
            total -= lastShapeVal;
            lastShapeVal = value;
        }
    }

    if (input.checked)
        burgz.total_price.value = total + value
    else
        burgz.total_price.value = total - value;
}


////////////Display information


function displayInfo(){
if (FinalVal()) 

    {
        var fields=["name", "address", "email", "PN"];
        var fieldNames=["Name", "Address", "Email Address", "Phone Number"];
        var msg = "";

        for(i=0;i<fields.length;i++)
            msg += fieldNames[i] + ": " + document.info[ fields[i] ].value + "\n";


        alert(msg);
    }
    return true;
}

＆＃13;

    <h2>We'd Like to Know More About You!</h2>
    <form name="info">
        Name: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "name" placeholder="Enter a valid name">*</br></br>
        Address: &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp <input type = "text" id = "inf" name = "address" placeholder="Enter a valid address"></br></br>
        Email Address: &nbsp <input type="email" id = "inf" name="email" placeholder="Enter a valid email address">*</br></br>
        Phone Number: &nbsp <input type = "tel" id = "inf" name ="PN"  placeholder="Enter a valid phone number">*</br></br>
        <hr/> 
    </form>

    <h2>What Kind of Burger Would You Like to Order?</h2>
    <form name ="burgz">

        Add-ons <br/>
        &nbsp &nbsp <input type="checkbox" name="AO"  value="45" onchange="calculate(this);">Bacon - 45
        &nbsp &nbsp <input type="checkbox" name="AO"  value="40" onchange="calculate(this);">Sausage - 40
        &nbsp &nbsp <input type="checkbox" name="AO"  value="30" onchange="calculate(this);">Ham - 30
        &nbsp &nbsp <input type="checkbox" name="AO"  value="10" onchange="calculate(this);">Tomatoes - 10
        &nbsp &nbsp <input type="checkbox" name="AO"  value="3" onchange="calculate(this);">Peppers - 3
        &nbsp &nbsp <input type="checkbox" name="AO"  value="5" onchange="calculate(this);">Olives - 5
        &nbsp &nbsp <input type="checkbox" name="AO"  value="15" onchange="calculate(this);">Extra Cheese - 15
        <br/>


        Size<br/>
        &nbsp &nbsp <input type="radio" name="size"  value="10" onchange="calculate(this);">Small - 10
        &nbsp &nbsp <input type="radio" name="size" value="20" onchange="calculate(this);">Medium - 20
        &nbsp &nbsp <input type="radio" name="size" value="30" onchange="calculate(this);">Large - 30
        <input type="hidden" name="size">
        <br/>


        Shape<br/>
        &nbsp &nbsp <input type="radio" name="shape" value="15" onchange="calculate(this);">Round - 15
        &nbsp &nbsp <input type="radio" name="shape" value="10" onchange="calculate(this);">Square - 10
        <input type="hidden" name="shape">
        <br/>

        <p>Total Price: <input type="text" name="total_price" value="0" readonly="readonly"></p>
        <input type = "button" onClick = "displayInfo()" value ="Submit Info">
    </form>

＆＃13;

＆＃13;

＆＃13;