【问题标题】:Having Issues with using VISIBLE. My Javascript doesnt seem to be handling the event when the check box is clicked使用 VISIBLE 时遇到问题。单击复选框时,我的 Javascript 似乎没有处理该事件
【发布时间】:2014-03-23 07:15:34
【问题描述】:

我所有的隐藏字段都有 ID。并在我的 JavaScript 中尝试将付款选择的可见性从 false 设置为 true。现金支付应该只显示要发送到的地址。信用卡付款带有文本框和标签,以便在线处理付款。但是当我运行脚本时,不会出现复选框选择。我分配了一个 onClick 事件,但仍然无法正常工作。有什么建议么?

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="ShoppingCart.aspx.cs" Inherits="ShoppingCart" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">

<head>
    <script type="text/javascript">
        function paymentFunction() {
            if (document.getElementById("rbCash").checked) {
                document.getElementById("lbCash").visible = true;
                document.getElementById("lbCash2").visible = true;
                document.getElementById("lbCash3").visible = true;
                document.getElementById("lbCash4").visible = true;
            } 
              else 
            {
            if(document.getElementById("rbCreditCard").checked)
            {
                document.getElementById("lbCard").visible = true;
                document.getElementById("lbCardNum").visible = true;
                document.getElementById("lbCVV").visible = true;
                document.getElementById("lbexp").visible = true;
                document.getElementById("ddlCard").visible = true;
                document.getElementById("tbCnum").visible = true;
                document.getElementById("tbcvvnum").visible = true;
                document.getElementById("tbexp").visible = true;


            }
          }
        }
    </script>

      <style type="text/css">
            .style1
            {
                width: 100%;
            }
          .style2
          {
              width: 100%;
          }
          .style3
          {
              width: 130px;
          }
        </style>

</head>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <table class="style2">
        <tr>
            <td class="style3">
                Payment Type:</td>
            <td>
                <asp:CheckBox ID="rbCash" runat="server" onClick="paymentFunction()" Text="Cash" ClientIDMode="Static"/>
                <asp:CheckBox ID="rbCreditCard" runat="server" onClick="paymentFunction()" Text="Credit Card" />
            </td>
        </tr>
        <tr>
            <td class="style3">
                &nbsp;</td>
            <td>
                <asp:Label ID="lbCash" runat="server" ForeColor="Black" 
                    Text="Please Send Payment To:" Visible="False" ClientIDMode="Static"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="style3">
                &nbsp;</td>
            <td>
                <asp:Label ID="lbCash2" runat="server" ForeColor="Black" 
                    Text="Wild Style Shoes" Visible="False" ClientIDMode="Static"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="style3">
                &nbsp;</td>
            <td>
                <asp:Label ID="lbCash3" runat="server" ForeColor="Black" 
                    Text="1808 West Avenue" Visible="False" ClientIDMode="Static"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="style3">
                &nbsp;</td>
            <td>
                <asp:Label ID="lbCash4" runat="server" ForeColor="Black" 
                    Text="Chicago, IL 88947" Visible="False" ClientIDMode="Static"></asp:Label>
            </td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="lbcard" runat="server" Text="Card Type" Visible="False"></asp:Label>
            </td>
            <td>
                <asp:DropDownList ID="ddlCard" runat="server" Visible="False">
                    <asp:ListItem>Select A Card</asp:ListItem>
                    <asp:ListItem>Visa</asp:ListItem>
                    <asp:ListItem>Discover</asp:ListItem>
                    <asp:ListItem>MasterCard</asp:ListItem>
                    <asp:ListItem>American Express</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="lbcardnum" runat="server" Text="Card Number:" Visible="False"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="tbCnum" runat="server" Visible="False" Width="200px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="lbCVV" runat="server" Text="CVV Number" Visible="False"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="tbcvvnum" runat="server" Visible="False" Width="58px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style3">
                <asp:Label ID="lbexp" runat="server" Text="Expiration Date" Visible="False"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="tbexp" runat="server" Visible="False"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td class="style3">
                &nbsp;</td>
            <td>
                <asp:Button ID="Button1" runat="server" Text="Submit Payment" Visible="False" />
            </td>
        </tr>
    </table>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;</p>
    <p>
        Thank You For Shopping With Us:<br />
    </p>
    <p>
    </p>
    <p>
    </p>
    <p>
    </p>
    <p>
    </p>


</asp:Content>

【问题讨论】:

    标签: c# javascript asp.net .net


    【解决方案1】:

    如果你在服务器端设置 Visible = false 就像你正在做的那样,那么服务器将不会呈现控件。

    您可能想要执行以下操作:

    <asp:Label ID="lbCash" runat="server" ForeColor="Black" 
                        Text="Please Send Payment To:" style="visibility:hidden" ClientIDMode="Static"></asp:Label>
    

    然后在javascript中做这样的事情:

    document.getElementById('lbCash').style.visibility = 'visible';
    

    【讨论】:

    • 是否有原因这仅适用于现金选择我按照您的建议进行操作,但信用卡无法使用空白。
    • 我以 lbCash 为例说明如何处理所有这些问题。如果其余的都不起作用,那么还有另一个问题。
    猜你喜欢
    • 2018-08-21
    • 2012-05-14
    • 1970-01-01
    • 2015-04-14
    • 1970-01-01
    • 1970-01-01
    • 2020-11-05
    • 2021-12-18
    • 2021-10-08
    相关资源
    最近更新 更多