javascript - 在警报消息中显示所选复选框和单选按钮的值及其总计-6ren

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

转载作者：行者123 更新时间：2023-11-28 06:57:42

在这里的人的帮助下，我几乎弄清楚了我的整个系统。现在唯一困扰我的是如何显示所选复选框和单选按钮的名称和值及其总计(位于 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>

最佳答案

您在 if 条件中使用 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 值，如下所示:

///////////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;
}

    <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>

关于javascript - 在警报消息中显示所选复选框和单选按钮的值及其总计，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32438270/

文章推荐： c++ - 如何在 2 个 int 函数之间重复抛出一个变量？

文章推荐： css - 使用 Bootstrap 制作的网站在 Chrome 中的布局有问题

iphone - 如果我向集合发送 -release 消息，它是否会向它所拥有的所有对象发送 -release 消息？
我一直在读到，如果一个集合“被释放”，它也会释放它的所有对象。另一方面，我还读到，一旦集合被释放，集合就会释放它的对象。但最后一件事可能并不总是发生，正如苹果所说。系统决定是否取消分配。在大多数情况
wcf - 以二进制方式序列化 WCF 消息，而不是作为 SOAP 消息
我有一个客户端-服务器应用程序，它使用 WCF 进行通信，并使用 NetDataContractSerializer 序列化对象图。由于服务器和客户端之间传输了大量数据，因此我尝试通过微调数据成员的
java - 针对特定属性组同步处理 jms 消息，但在其他组中同时处理 jms 消息
我需要有关 JMS 队列和消息处理的帮助。我有一个场景，需要针对特定属性组同步处理消息，但可以在不同属性组之间同时处理消息。我了解了特定于每个属性的消息组和队列的一些知识。我的想法是，我想针对
c++ - #define 打印(消息)std::cout << 消息 << std::endl
我最近开始使用 C++，并且有一种强烈的冲动 #define print(msg) std::cout void print(T const& msg) { std::cout void
java - JGroups:发送(空，空，消息)与发送(地址，空，消息)
我已经为使用 JGroups 编写了简单的测试。有两个像这样的简单应用程序 import org.jgroups.*; import org.jgroups.conf.ConfiguratorFact
javascript - 消息 : This browser doesn't support the API's required to use the firebase SDK.(消息/不支持的浏览器)
这个问题在这里已经有了答案: Firebase messaging is not supported in your browser how to solve this? (3 个回答) 7 个月前关
c# - EntityState 必须设置为 null、Created(对于 Create 消息)或 Changed(对于 Update 消息)
在我的 C# 控制台应用程序中，我正在尝试更新 CRM 2016 中的帐户。IsFaulted 不断返回 true。当我向下钻取时它返回的错误消息如下: EntityState must be set
json - Graylog 服务器无法通过 TCP::GELFDispatcher 读取 Gelf 消息 - 无法处理 GELF 消息::无法解压缩 GELF 消息负载
我正在尝试通过 tcp 将以下 json 写入 graylog 服务器: {"facility":"GELF","file":"","full_message":"Test Message Tcp",
Django 消息，如何隐藏特定消息
我正在使用 Django 的消息框架来指示成功的操作和失败的操作。如何排除帐户登录和注销消息？目前，登录后登陆页面显示已成功登录为“用户名”。我不希望显示此消息，但应显示所有其他成功消息。我的尝试
qt - 如何启用和禁用qDebug()消息
我通过编写禁用qDebug（）消息 CONFIG(release, debug|release):DEFINES += QT_NO_DEBUG_OUTPUT 在.pro文件中。这很好。我想知道是否可以
Laravel throttle 消息
我正在使用 ThrottleRequest 来限制登录尝试。在 Kendler.php 我有 'throttle' => \Illuminate\Routing\Middleware\Throttl
perl - 如何在没有位置信息的情况下输出die()消息？
我有一个脚本，它通过die引发异常。捕获异常时，我想输出不附加位置信息的消息。该脚本: #! /usr/bin/perl -w use strict; eval { die "My erro
rabbitmq - 消息、队列和交换器有哪些限制？
允许的消息类型有哪些(字符串、字节、整数等)？消息的最大大小是多少？队列和交换器的最大数量是多少？最佳答案理论上任何东西都可以作为消息存储/发送。实际上您不想在队列上存储任何内容。如果队列大部
.Net，向没有窗口的命令行进程发送按键/消息？
基本上，我正在尝试创建一个简单的 GUI 来与 Robocopy 一起使用。我正在使用进程打开 Robocopy 并将输出重定向到文本框，如下所示: With MyProcess.StartI
记录 MQ 消息
我想将进入 MQ 队列的消息记录到数据库/文件或其他日志队列，并且我无法修改现有代码。是否有任何方法可以实现某种类似于 HTTP 嗅探器的消息记录实用程序？或者也许 MQ 有一些内置的功能来记录消息？
未显示 primefaces 消息
我得到了一个带有 single_selection 数据表和一个命令按钮的页面。命令按钮调用一个 bean 方法来验证是否进行了选择。如果不是，它应该显示一条消息警告用户。如果进行了选择，它将导航到另
gcc 编译时间注释/消息
我知道 MSVC 可以通过 pragma 消息做到这一点 -> http://support.microsoft.com/kb/155196 gcc 是否有办法打印用户创建的警告或消息？ (我找不到谷
当有大量节点或二进制数据时 Erlang 消息
当存在大量节点或二进制数据时， native Erlang 消息能否提供合理的性能？情况 1:有一个大约 50-200 台机器的动态池(erlang 节点)。它在不断变化，每 10 分钟大约添加或删
登录后 django 消息
我想知道如何在用户登录后显示“欢迎用户，您已登录”的问候消息，并且该消息应在 5 秒内消失。该消息将在用户成功登录后显示一次，但在同一 session 期间连续访问主页时不会再次显示。因为我在 ho
居中添加名称的 sprintf 消息
如果我仅使用Welcome消息，我的代码可以正常工作，但是当打印p->client_name指针时，消息不居中。所以我的问题是如何将消息和客户端名称居中，就像它是一条消息一样。为什么它目前仅将消

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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