Jquery,在用户控件中获取标签值

时间:2012-05-16 09:09:01

标签: javascript jquery asp.net jquery-selectors

我需要在asp.net页面中使用usercontrol标签中的值进行计算。

用户控件标签是:

 <asp:Label ID="LblInvoicePriceValue" runat="server" ></asp:Label>

我把它包括在内:

<Controls:VehicleInformation ID="VehicleInformationControl" runat="server" />

我的jquery函数是这样的: 请参阅第1点和第2点。

<script type="text/javascript">
        $(document).ready(function () {
            alert('call function to do calculation here');
            // 1.   Find in the vehicle information user control the invoiced ammount label
            // 2.   Find the vat excluded value **after** it was typed in the textbox
            // 3.   If invoiced ammount is greater than zero, then
            // 3.a  Find Label Percentage 
            // 3.b  Label.Text = (AmmountWithoutVat/InvoicedAmmount)*100 + '%'
        });
  </script>

HTML生成:UPdate1

对于标签:

 <span id="MainContent_VehicleInformationControl_LblInvoicePriceValue" class="bold"></span>

对于文本框:

<input name="ctl00$MainContent$TxtVatExcluded" type="text" id="TxtVatExcluded" class="calculation" />

更新2:

<script type="text/javascript">
        $(document).ready(function () {
            alert('call function to do calculation here');

            $("#TxtVatExcluded").keypress(function() {
                var invoiceprice = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
                var vatexcluced = $("#TxtVatExcluded").val();
                var lblPercentage = $("#MainContent_LblPercentage");
                if (invoiceprice > 0) {
                    lblPercentage.text((vatexcluced / invoiceprice) * 100);
                }
            })

            // 1.   Find in the vehicle information user control the invoiced ammount label
            // 2.   Find the vat excluded value after it was typed in the textbox
            // 3.   If invoiced ammount is greater than zero, then
            // 3.a  Find Label Percentage 
            // 3.b  Label.Text = (AmmountWithoutVat/InvoicedAmmount)*100 + '%'
        });
  </script>

3 个答案:

答案 0 :(得分:3)

您可以使用元素的呈现ID来使用jQuery获取值

var lbl = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
var tbox = $("#TxtVatExcluded").val();

稍后当计算为complet时,您可以将标签文本更新为

$("#MainContent_VehicleInformationControl_LblInvoicePriceValue").html("new label");

更新

要使用用户键入的逻辑,您必须将函数绑定到keypress / keyup / keydown事件

$("#myinputbox").keypress(function() {
    var lbl = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
    var tbox = $("#TxtVatExcluded").val();
    //... so on
}

更新2:

因为,您试图使用这些值进行计算,所以确保首先有数字是更安全的。为此,您可以根据需要使用parseInt()parseFloat()

        $("#TxtVatExcluded").keypress(function() {
            var invoiceprice = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
            var vatexcluced = $("#TxtVatExcluded").val();
            var lblPercentage = $("#MainContent_LblPercentage");
            if (invoiceprice > 0) {
                lblPercentage.text((parseInt(vatexcluced) / parseInt(invoiceprice)) * 100);
            }
        })

答案 1 :(得分:3)

var label_text = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
$("#TxtVatExcluded").val(label_text);

<强>更新 如果要检查文本字段是否为空,则只复制标签,然后使用以下代码

var label_text = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
var txt = $("#TxtVatExcluded").val();
if(txt.length==0)
{
  $("#TxtVatExcluded").val(label_text);
}

答案 2 :(得分:2)

这将为您提供标签控件的值:

function Calculate()
{
    var InvoicedAmmount = $("#MainContent_VehicleInformationControl_LblInvoicePriceValue").text();
    var AmmountWithoutVat = $("#TxtVatExcluded").val();

    var Result = (AmmountWithoutVat/InvoicedAmmount)*100

    $("#OutputLabel").html(Result + " %");
}

您可以将onBlur事件附加到文本框,以便在离开文本框时触发计算 - 您不会真正想要在键入时重新计算数量。

$(document).ready(function () 
{ 
    $("#TxtVatExcluded").bind("blur",function(){ Calculate(); });
}