Ajouter deux numéros en page asp.net en utilisant Javascript

donné deux zones de texte. (TextBox1 & TextBox2), je veux ajouter deux chiffres (en utilisant les deux zones de texte) et afficher le résultat dans la zone de texte thrid (TextBox3) instantanément i.e. sans appuyer sur un bouton asp.net. Cela doit être fait en utilisant Javascript. Je suis nouveau à javascript, donc ne pas avoir beaucoup d'idée.Ajouter deux numéros en page asp.net en utilisant Javascript

Ceci est la page d'asp.net.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>Untitled Page</title> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     Box1 
     <br /> 
     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
     <br /> 
     <br /> 
     Box2<br /> 
     <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> 
     <br /> 
     <br /> 
     Box3<br /> 
     <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox> 

    </div> 
    </form> 
</body> 
</html>

Source

2010-07-30 Waqar Ahmed

W- essayer (il est basé autour du tout gestionnaire d'événements de la onkeyup 'js):

[modifier 2] - encore une fois gestionnaire d'événements changé onKeyUp. vous auriez besoin de faire un petit chèque de la somme (0 fonction que la valeur textbox était un nombre (isNan).

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head id="Head1" runat="server"> 
    <title>Untitled Page</title> 
</head> 
<body> 
    First Number :<input id="txtFirstNumber" type="text" onkeyup="sum();" /><br /> 
    Second Number:<input id="txtSecondNumber" type="text" onkeyup="sum();" /><br /> 
    Third Number:<input id="txtThirdNumber" type="text" /><br /> 
    <input id="changeWatcher" type="text" /> 
</body> 

<script type="text/javascript"> 

    function sum() { 
     var txtFirstNumberValue = document.getElementById('txtFirstNumber').value; 
     var txtSecondNumberValue = document.getElementById('txtSecondNumber').value; 
     var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue); 
     if(!isNaN(result)) 
     { 
      document.getElementById('txtThirdNumber').value = result; 
      //alert(parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue)); 
     document.getElementById('changeWatcher').value = new Date(); 
     } 
    } 

</script> 

</html>

Source

2010-07-30 12:29:58

Excellent Jim..Il fonctionne .... Merci beaucoup ... juste une autre petite chose - y at-il un "événement de changement" ou un script similaire qui peut être appliqué quand une valeur dans textbox1 ou textbox2 est modifiée , la valeur de textbox3 est mise à jour instantanément - sans tabulation ou cliquant ailleurs où. vérifier l'exemple ici "http://hotel.coraltours.net/" La date de check-in et de nuit effectuent la date de départ instantanément. –

Waqar - cette page semble utiliser un prototype (un framework javascript). cependant, il utilise l'événement onkeyup, de sorte que vous pouvez le modifier dans l'exemple. –

Merci Jim et Tafa ... Maintenant ça marche Parfait - Juste la façon dont je le voulais .. A bientôt Waqar –

J'imagine que vous pouvez attacher une fonction à l'événement onBlur de chaque cellule pour le faire.

Source

2010-07-30 12:27:56 TMN

-1

Et une autre solution en utilisant la fonction jQuery qui se produit une fois que vous sortez de TextBox2 soit par la souris cliquant ou en tabulant avant et il devrait mettre le résultat en Textbox3.

$('#Textbox2').blur(
    function() { 
     var t1value = $('#Textbox1').val(); 
    var t2value = &('#Textbox2').val(); 
    var sum = t1value + t2value;  
    $('#Textbox3').val(sum); 
     });

Source

2010-07-30 12:32:33 mare

-1 - C'est une tâche simple qui ne nécessite pas de jQuery. L'OP déclare même qu'il est nouveau à Javascript ... montrons-lui comment faire les choses simples sans un cadre d'abord. –

+1 au commentaire. mais aussi, si l'OP charge des centaines de lignes de boîtes de texte, les méthodes delegate/live de jQuery seraient intéressantes ici ... bien que je doute fortement que ce soit le cas. –

ouais vous êtes à la fois à droite, j'étais trop rapide répondant à la question .. – mare

d'abord, vous devez trouver votre textboxes dans DOM, puis attribuez-lui des gestionnaires d'événements à ces éléments, et enfin vous devez écrire la fonction qui ajoutera votre . Voici les numéros petit exemple:

<script language="JavaScript" type="text/javascript"> 
// finding elements. you have to use ASP.NET ClientID property due to ASP generates its own ids. 
var tb1 = document.getElementById('<%= TextBox1.ClientID %>'); 
var tb2 = document.getElementById('<%= TextBox2.ClientID %>'); 
var tb3 = document.getElementById('<%= TextBox3.ClientID %>'); 
// assigning event handlers 
tb1.onchange=calcNumbers; 
tb2.onchange=calcNumbers; 
// sum function 
function calcNumbers() {  
tb3.value = parseInt(tb1.value) + parseInt(tb2.value); 
} 
</script>

Source

2010-07-30 12:37:02

Je suis surpris que d'autres utilisent le gestionnaire d'événements onBlur. Pour ce problème, je suggère d'utiliser le gestionnaire d'événement onChange. Je peux être appelé juste un novice quand javascript est la question, je suis prêt à écouter pourquoi onBlur est préferé ici.

Source

2010-07-30 12:37:52 tafa

Tafa - soit ou, quoique je suis d'accord que l'événement onchange donnera des résultats instantanés sans avoir recours à quitter la zone de texte. +1 et j'ai mis à jour mon exemple avec un crédit qui vous est accordé. –

La raison pour laquelle je suis allé avec onBlur est que la somme ne se mettait pas constamment à jour lorsque l'utilisateur saisissait le numéro. Cela fait simplement paraître les choses un peu moins «nerveuses». –

Ajouter deux numéros en page asp.net en utilisant Javascript

Répondre

Questions connexes