How to compare two text box values using jquery?

I have two text boxes named txtbalance and txtdays. If I enter greater value in txtdays than txtbalance I want show error message. I have a javascript method but it not working.

<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
     $("#txtdays").on('input', function () {
         var txtbalance = $('#txtbalance').val();
         var txtdays = $('#txtdays').val();

         if (txtbalance === "" || txtdays === "") return false;

         if (parseInt(txtbalance) < parseInt(txtdays)) {
             alert("u cant apply");
         }
     });
 });
</script>

And my sourse code

<% Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"  AutoEventWireup="true"
  CodeBehind="Default.aspx.cs" Inherits="drop._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
    .style1
    {
        width: 100%;
    }
    </style>
</asp:Content>
 <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 <head>
 <script type="text/javascript" language="javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
     $("#txtdays").on('input', function () {
         var txtbalance = $('#txtbalance').val();
         var txtdays = $('#txtdays').val();

         if (txtbalance === "" || txtdays === "") return false;

         if (parseInt(txtbalance) < parseInt(txtdays)) {
             alert("u cant apply");
         }
     });
 });
</script>
</head>   
<table class="style1">
   <tr>
 <asp:TextBox ID="txtbalance" runat="server"></asp:TextBox>
 </tr>
 <tr>
 <asp:TextBox ID="txtdays" runat="server"></asp:TextBox>
 </tr>
 </asp:Content>

please help me reach a solution...

Upvotes: 0

Views: 17908

Answers (5)

Adam
Adam

Reputation: 126

http://jsfiddle.net/y7hgwyvy/ - jquery 1.7

$(document).ready(function () {
    $("#txtdays").on('input', function () {
        var txtbalance = $('#txtbalance').val();
        var txtdays = $('#txtdays').val();
        
        if (txtbalance === "" || txtdays === "") return false;
        
        if ( parseInt(txtbalance) < parseInt(txtdays) ) {
            alert("u cant apply");
        }
    });
});

you can also think about some delay when user typing value in txtdays input.

EDIT

solution for jquery 1.4 http://jsfiddle.net/y7hgwyvy/1/

Upvotes: 0

ekoindra0912
ekoindra0912

Reputation: 13

I would use key up method :

$("#txtdays").on('keyup', function () {
    // your code here
}

Upvotes: 0

malkam
malkam

Reputation: 2355

Add event handler to change event of text boxes and compare values.

<script language="javascript" type="text/javascript">
var bal='';
var days='';
$(document).ready(function () {
   $( "#txtbalance" ).change(function() {
         bal=$(this).val();
         return compare(bal,days);
});

 $( "#txtdays" ).change(function() {
         bal=$(this).val();
         return compare(bal,days);
});
});
function(bal,days)
{
        if(bal!='' && days!='' && parseInt(bal)<parseInt(days))
            {
           alert("u cant apply");
          return false;
}
         return true;
}
</script>

Upvotes: 0

soundhiraraj
soundhiraraj

Reputation: 323

 $(document).ready(function () {
   var n = $("#txtbalance").val();
    var m = $("#txtdays").val();

    if(parseInt(n) > parseInt(m)) {
        alert("Alert!");
    }
});

Upvotes: 2

Michael S&#248;rensen
Michael S&#248;rensen

Reputation: 475

if the balances are numbers, you most likely need to use parseInt. LIke this:

if (parseInt($('#txtbalance').val()) < parseInt($('#txtdays').val())) {
    alert("u cant apply")
}

Upvotes: 3

Related Questions