在html5中設置另一個文本框的文本框的值asp.net

我的mvc4 asp.net視圖中有3個文本框。在html5中設置另一個文本框的文本框的值asp.net

代碼爲： -

<table> 
<tr><td>A:</td><td>@Html.TextBox("A")</td></tr> 
<tr><td>B:</td><td>@Html.TextBox("B")</td></tr> 
<tr><td>Answer:</td><td>@Html.TextBox("C")</td></tr> 
</table>

例如，我要的是，

，只要我在文本框一個在文本框B，答案「中輸入「3」和「2」 5 「應該立即顯示在TextBox C中，而不需要我點擊任何提交按鈕。

我該怎麼做？

謝謝。

來源

2013-10-28 Mirage

將股利和實現自己的任務.... – Hariharan

這裏使用JQuery

SAMPLE DEMO

對於使用JQuery，你需要添加JQuery的LIB在另一個解決方案您頭標籤，只需將下面的行粘貼到頭標籤中即可。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JQuery的：

<script type="text/javascript" > 

$(document).ready(function(){ 

    $("#Txt_1").on('input', function() { 
     sumCal(); 
    }); 

    $("#Txt_2").on('input', function() { 
     sumCal(); 
    }); 

    function sumCal() { 

     var txt1 = $("#Txt_1").val(); 
     var txt2 = $("#Txt_2").val(); 
     var result = Number(txt1) + Number(txt2); 
     $("#Txt_3").val(result); 
    } 
}); 
</script>

來源

2013-10-28 08:06:19

謝謝，您的代碼按預期工作。但我從來沒有使用JQuery，所以我不知道如何與我的代碼集成。你有什麼建議？ – Mirage

@Mayur：查看我更新的答案，如何添加jquery lib –

太棒了！工作完全像我想... 感謝您的幫助！ :) – Mirage

你需要使用某種形式的Javascript才能做到這一點。這裏是一塊香草的JavaScript的這增加了一個事件處理程序到A和B兩者，其比較文本框的值，並且如果條件滿足顯示在C所需的值：

// Get all the textboxes by their IDs 
var textboxA = document.getElementById("A"); 
var textboxB = document.getElementById("B"); 
var textboxC = document.getElementById("C"); 
// Add a handler for the keyup event 
textboxA.addEventListener("keyup", showAnswer, false); 
textboxB.addEventListener("keyup", showAnswer, false); 

function showAnswer() { 
    // Convert the values from a string to a float 
    var valA = parseFloat(textboxA.value); 
    var valB = parseFloat(textboxB.value); 
    // Make sure both values are valid numbers 
    if(!isNaN(valA) && !isNaN(valB)) { 
     // Show the calculated value in the C box 
     textboxC.value = valA + valB; 
    } 
    else { 
     // Can't do any calculations, just show a blank value 
     textboxC.value = ""; 
    } 
}

這裏是一個fiddle到演示。

有使用jQuery這樣做更容易方式：

$(function() { 
    $("#A, #B").on("keyup blur", function() { 
     var valA = parseFloat($("#A").val()); 
     var valB = parseFloat($("#B").val()); 
     if(!isNaN(valA) && !isNan(valB)) { 
      $("#C").val(valA + valB); 
     } 
     else { 
      $("#C").val(""); 
     } 
    }); 
});

來源

2013-10-28 07:57:39 CodingIntrigue

我在的問題給了僅僅是一個例子，值將並不總是3和2. 它不斷變化... 而我是新來的JavaScript，所以我仍然不知道如何處理。 – Mirage

基本計算器的最新答案 – CodingIntrigue

試試這個

$(document).ready(function(){ 

    $("#txtbox2").keyup(function(){ 
    var txt01= parseInt ($("#txtbox1").val(),10); 

var txt02= parseInt($("#txtbox2").val(),10); 

$("#txtbox3").val(txt01+txt02); 

    }); 
});

來源

2013-10-28 08:39:53 meer

在html5中設置另一個文本框的文本框的值asp.net

回答

相關問題