jquery for enable/disable textbox in if statement

Question

0.00/5 (No votes)

See more:

Any one please provide me the code for Jquery..

if tbfirstper==100 then tbsecondnominee,tbsecondper,tbthitdnominee,tbthirdper is not enable.
If tbfirstper <100;then tbsecondnominee,tbsecondper is enable,
if tbfirstper+tbsecondper<100, then tbthitdnominee,tbthirdper is enable,

I am new in jquery so please help me how to write the code

JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $("#tbfirstper,#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").blur(function () {
            var v1 = $("#tbfirstper").val(),
          v2 = $("#tbsecondper").val();
            if (!isNaN(v1)) {
                if (parseInt(v1, 10) == 100) {
                    $("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", true);

                }
                else if (parseInt(v1, 10) < 100) {
                    $("#tbthitdnominee,#tbthirdper").attr("disabled", true);
                    $("#tbsecondnominee,#tbsecondper").attr("disabled", false);
                }
                if (!isNaN(v2)) {
                    if ((parseInt(v2, 10) + parseInt(v1, 10)) == 100) {
                        $("#tbthitdnominee,#tbthirdper").attr("disabled", true);
                    }
                    else if ((parseInt(v2, 10) + parseInt(v1, 10)) < 100) {
                        $("#tbthitdnominee,#tbthirdper").attr("disabled", false);
                    }
                }
            }
        });
    });
</script>

but this is now work..when i put 100 in tbfirstper text box then others texboxes is not disable..

Posted 19-Apr-13 23:47pm

prodipjsr

Updated 16-Feb-17 22:02pm

Prasad Khandekar

v3

Add a Solution

Comments

F-ES Sitecore 17-Feb-17 4:32am

View the source of the page, do you have elements with ids like "tbfirstper" etc? That might be the ID you give the control server-side, but for client-side (where jquery runs) the ID might be changed, especially if you use master pages or the controls are inside containers. If the js is on the same page as the controls then do things like this instead

v2 = $("#<%=tbsecondper.ClientID%>").val();

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Prasad Khandekar · Answer 1 · 2013-04-20T01:37:00

Solution 1

Hello,

You don't have code to reset the disable attribute once value of field tbfirstper is set to 100. Try adding following line at the start of blur function.

JavaScript

$("#tbfirstper,#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", false);

Your javascript function should look similar to one shown below.

JavaScript

$("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", true);
$(document).ready(function () {
    // if tbfirstper==100 then tbsecondnominee,tbsecondper,tbthitdnominee,tbthirdper is not enable.
    // If tbfirstper <100;then tbsecondnominee,tbsecondper is enable,
    // if tbfirstper+tbsecondper<100, then tbthitdnominee,tbthirdper is enable
    $("#tbfirstper,#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").blur(function () {
        $("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", true);
        var v1 = $("#tbfirstper").val(),
        v2 = $("#tbsecondper").val();
        if (!isNaN(v1)) {
            if (parseInt(v1, 10) == 100) {
                $("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", true);
            }
            else if (parseInt(v1, 10) < 100) {
                $("#tbthitdnominee,#tbthirdper").attr("disabled", true);
                $("#tbsecondnominee,#tbsecondper").attr("disabled", false);
            }
            if (!isNaN(v2)) {
                if ((parseInt(v2, 10) + parseInt(v1, 10)) == 100) {
                    $("#tbthitdnominee,#tbthirdper").attr("disabled", true);
                }
                else if ((parseInt(v2, 10) + parseInt(v1, 10)) < 100) {
                    $("#tbthitdnominee,#tbthirdper").attr("disabled", false);
                }
            }
        }
    });
});

Regards,

Posted 20-Apr-13 1:37am

Prasad Khandekar

Updated 21-Apr-13 7:26am

v3

Comments

prodipjsr 20-Apr-13 8:01am

means what?? sir i am not clear of ur views..

Prasad Khandekar 20-Apr-13 15:24pm

If you add the above mentioned statement as the first line your blur function then it will reset all the text boxes and enable them. The subsequent code will then disable the required textboxes.

prodipjsr 21-Apr-13 3:23am

sir, i hv change the code (true to false) but still no effect ..

Prasad Khandekar 21-Apr-13 13:26pm

I have updated the solution please check it.

prodipjsr 22-Apr-13 0:59am

Hello sir, No update:; i cant understand where is the problem, i hv used the following control for the textboxes.. is there any problem??/

<fieldset>
Nominee Information
<br />
First Nominee Name <asp:TextBox ID="tbfirstnominee" style="text-transform:uppercase" runat="server">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender8" runat="server" FilterType="LowercaseLetters,UppercaseLetters" TargetControlID="tbfirstnominee" />
Percentage <asp:TextBox ID="tbfirstper" MaxLength="3" runat="server" Width="35px">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender9" runat="server" FilterType="Numbers" TargetControlID="tbfirstper" />
<br />
<br />
Second Mominee Name <asp:TextBox ID="tbsecondnominee" style="text-transform:uppercase" runat="server">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender12" runat="server" FilterType="LowercaseLetters,UppercaseLetters" TargetControlID="tbsecondnominee" />
Percentage <asp:TextBox ID="tbsecondper" MaxLength="3" runat="server" Width="34px">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender10" runat="server" FilterType="Numbers" TargetControlID="tbsecondper" />
<br />
<br />
Third Mominee Name <asp:TextBox ID="tbthitdnominee" style="text-transform:uppercase" runat="server">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender13" runat="server" FilterType="LowercaseLetters,UppercaseLetters" TargetControlID="tbthitdnominee" />
Percentage <asp:TextBox ID="tbthirdper" MaxLength="3" runat="server" Width="34px">
<cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender11" runat="server" FilterType="Numbers" TargetControlID="tbthirdper" />
<br />
<br />
</fieldset>

prodipjsr 22-Apr-13 5:59am

any one please help me..

Prasad Khandekar 22-Apr-13 9:47am

What do you mean by no update. If you look at updated solution given by me and have similar code in your page then it does the required things. i.e. it will have all controls disabled except the tbfirstper. All controls will remain in disabled state if the value entered in tbfirstper is 100. otherwise tbsecondnominee,#tbsecondper will be enabled & tbthitdnominee,#tbthirdper will remain in disabled state.

prodipjsr 23-Apr-13 5:05am

sir, when i run the page through IE, then all textboxes are enable...

Prasad Khandekar 23-Apr-13 6:14am

Hmm..., Strange. Just to narrow down the search try removing the extenders.

prodipjsr 23-Apr-13 6:35am

what actually the problem??

jkirkerx · Answer 2 · 2013-04-21T11:15:00

Solution 2

I didn't take the time to test it, just a quick rewrite from how I interpreted it.

$(document).ready(function () {
        
    $("#tbfirstper,#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").blur(function () {
        
        var txt_v1 = $("#tbfirstper").val();
        var txt_v2 = $("#tbsecondper").val();
        var v1 = parseInt(txt_v1);
        var v2 = parseInt(txt_v2);
                
        if (false == isNaN(v2)) {
            if (v1 == 100) {
                $("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", "disabled");
 
            }
            else if (v1 < 100) {
                $("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
                $("#tbsecondnominee,#tbsecondper").removeattr("disabled");
            }
        }
            
        if ((v1 + v2) == 100) {
                $("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
            }
            else if ((v1 + v2) < 100) {
                $("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
            }
        }
                
    });

});

Posted 21-Apr-13 11:15am

jkirkerx

Comments

prodipjsr 22-Apr-13 1:00am

sir, There is no update..

prodipjsr 22-Apr-13 6:00am

any one please help me!!!!

jkirkerx 22-Apr-13 13:01pm

You need to tell me what part is not working. Is the Blur statement not working, and the script is not running?

Are the textboxes not being disabled?

prodipjsr 23-Apr-13 4:21am

The textboxes not being disabled.

jkirkerx 23-Apr-13 12:31pm

$(#te4xtbox).attr("disabled", "disabled")

will disable the textbox in jquery

Sounds like the function is not running, you should test it using alert("I Fired") to make sure the code is firing under the blur condition.

Make sure you have jQuery loaded by making a reference to it.
<script src="jquery.js"></script>

http://learn.jquery.com/about-jquery/how-jquery-works/

prodipjsr 24-Apr-13 6:55am

sir, my code is::

<script type="text/javascript">
$(document).ready(function () {

$("#tbfirstper,#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").blur(function () {

var txt_v1 = $("#tbfirstper").val();
var txt_v2 = $("#tbsecondper").val();
var v1 = parseInt(txt_v1);
var v2 = parseInt(txt_v2);

if (false == isNaN(v2)) {
if (v1 == 100) {
$("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", "disabled");

}
else if (v1 < 100) {
$("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
$("#tbsecondnominee,#tbsecondper").removeattr("disabled");
}
}

if ((v1 + v2) == 100) {
$("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
}
else if ((v1 + v2) < 100) {
$("#tbthitdnominee,#tbthirdper").removeAttr("disabled");
}
}

});

});

</script>

jkirkerx 24-Apr-13 18:03pm

That looks good.

You need to run some checks to isolate why it's not working, if the textboxes won't disable, there's a reason, if the alert does not fire, you may not have jquery loaded, so make a new alert after the document ready, to see if jquery even loaded, then work your way down, test the blur event you binded to, then test the if statements.

if (false == isNaN(v2)) { if (v1 == 100) {
alert("v1==100(;
$("#tbsecondnominee,#tbsecondper,#tbthitdnominee,#tbthirdper").attr("disabled", "disabled"); } else if (v1 < 100) { $("#tbthitdnominee,#tbthirdper").removeAttr("disabled"); $("#tbsecondnominee,#tbsecondper").removeattr("disabled"); } }