Question

我正在尝试在更改组中的选项时运行ajax函数。但我不知道哪个属性会触发Ajax。我试图做各种各样的事情，但我做的每件事都会在浏览器中产生错误。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Checkout page</title>
<script type="text/javascript">
    var request;
    function NIS2USD() {
        var from = document.getElementById("NIS").value;
        var to = document.getElementById("USD").value;
        var amount = document.getElementById("totalAmountLabel").value;
        request = new XMLHttpRequest();
        request.onreadystatechange = ProcessResponse;
        request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" +    amount, true);
        request.send();
    }
    function USD2NIS() {
        var from = document.getElementById("USD").value;
        var to = document.getElementById("NIS").value;
        var amount = document.getElementById("totalAmountLabel").value;
        request = new XMLHttpRequest();
        request.onreadystatechange = ProcessResponse;
        request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" + amount, true);
        request.send();
    }
    function ProcessResponse() {
        if (request.readyState == 4 && request.status == 200) {
            document.getElementById("totalAmountLabel").innerHTML = request.responseText;
        }
    }
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="content">
    <div id="top">
        <div class="topright">
            <a href="#"><img src="images/sitemap.png" alt="Sitemap"</a> 
            <a href="#"><img src="images/rss.png" alt="RSS" /></a>              
        </div>
    </div>
    <div id="header">
        <div class="headings">
            <h1>WebBookStore</h1>
            <h2>pay less read more</h2>
        </div>
    </div>
            <div id="menu">
            <ul>
                <li><a href="Login.aspx">Login</a></li>
                    <li><a href="About.aspx">About Us</a></li>
                                <li><a href="Books.aspx">The Books Collection</a></li>
                                <li><a href="SearchBooks.aspx">Search Books</a></li>
                                <li><a href="Cart.aspx">Your Cart</a></li>
                                <li><a href="#">Checkout</a></li>
                    </ul>
          </div>
                  <div id="main">
        <div class="left">
            <asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Checkout"</asp:Label>
            <br />
            <br />
            <asp:Label ID="Label2" runat="server" Text="Client ID:"></asp:Label>
            <asp:Label ID="clientIDLabel" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <asp:Label ID="Label3" runat="server" Text="Delivery Date:"></asp:Label>
            <asp:Label ID="orderDateLabel" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <asp:Label ID="Label4" runat="server" Text="Total:"></asp:Label>
            <asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>
            <br />
            <br />
            <asp:Label ID="Label7" runat="server" Text="Currency:"></asp:Label>
            <asp:RadioButton ID="NIS" runat="server"  Checked="True" 
                GroupName='group1' Text="NIS"  />
            <asp:RadioButton ID="USD" runat="server" GroupName='group1' Text="USD" />
            <br />
            <br />
            <asp:Label ID="Label6" runat="server" 
        Text="Pick a delivery date"></asp:Label>
            <br />
            <br />
            <asp:Calendar ID="Calendar1" runat="server" BackColor="White" 
                BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana" 
                Font-Size="9pt" ForeColor="Black" Height="64px" NextPrevFormat="ShortMonth" 
                Width="218px" onselectionchanged="Calendar1_SelectionChanged">
                <DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333" 
                    Height="8pt" />
                <DayStyle BackColor="#CCCCCC" />
                <NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
                <OtherMonthDayStyle ForeColor="#999999" />
                <SelectedDayStyle BackColor="#333399" ForeColor="White" />
                <TodayDayStyle BackColor="#999999" ForeColor="White" />
            </asp:Calendar>
            <br />
            <asp:Button ID="Button1" runat="server" onclick="Button1_Click" 
                Text="Submit Order" />  
            <br />
            <asp:TextBox ID="TextBox1" runat="server" ForeColor="Red" Height="67px" 
                ReadOnly="True" TextMode="MultiLine" Visible="False" Width="451px"></asp:TextBox>
            <br />
        </div>
    </div>
    <div id="footer">
        <div class="info">
            &copy; 2012 WebBookStore<br />
            Site Design - <a href="http://www.URL.com">WebBookStore</a>
        </div>
     </div>
    </div>
</form>

Answer 1

我将你的radiobutton包装在一个div中并像这样访问它们。

<script type="text/javascript">

    $(function () {
        $("#rbs input").on("click", function() {
            DoSomthing($(this).attr("value"));
        });
    });


    function DoSomthing(val) {
        $("#<%=totalAmountLabel.ClientID%>").html(val);
    }

</script>

<div id="rbs">
    <p>
        <asp:RadioButton ID="NIS" runat="server" Checked="True" GroupName="rbGroup" Text="NIS"/>
        <asp:RadioButton ID="USD" runat="server" GroupName="rbGroup" Text="USD"/>

</div>
<asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>

希望这有帮助

编辑：添加了如何使用jquery Selector获取ASP.NET控件。

Answer 2

此代码用于c＃，您可以在page_load（）

中添加

NIS.Attributes.Add("onclick", "USD2NIS();");
USD.Attributes.Add("onclick", "NIS2USD();");

为什么RadioButton可以激活我的Ajax函数

2 个答案: