Comparing data of two textboxes is not working using jquery

Question

I want to compare the data of two text boxes using jquery like as we compare the password and confirm password while making an email account. Still i have the following stuff.

CSS

.test {
    display:none;
}

HTML

<input type="text" name="t1" />
<input type="text" name="t2" />
<label class="test" name="lblerror">Error</label>

jQuery

$("#t2").click(function () {
    if ($("#t1").val() === $("#t2").val()) {} else {
        $("#lblerror").removeClass("test");
    }
});

DEMO

Please help me, how can i compare these two strings while just leaving the second text box named t2.

Thanks in advance.

You do not know some basics about html and javaScript. You need to start from the beginning. — Burak Keceli
– Burak Keceli, Commented Aug 28, 2013 at 11:44
@B.K. true perhaps, but not helpful. Everyone begins somewhere. — Adam Hopkinson
– Adam Hopkinson, Commented Aug 28, 2013 at 11:54

Amit · Accepted Answer · 2013-08-28 11:49:32Z

4

Try this

You are using name as Id in Jquery, it is wrong. convert name to id. then it will work.

<input type="text" id="t1" />
<input type="text" id="t2" />
<label class="test" id="lblerror">Error</label>

JS

$(function(){
    $("#t2").change(function () {
                 if ($("#t1").val() === $("#t2").val()) {
                    $("#lblerror").addClass("test");        
                }
                else {
                    $("#lblerror").removeClass("test");
                }
            });
    });

Demo

edited Aug 28, 2013 at 11:49

answered Aug 28, 2013 at 11:43

Amit

15.4k8 gold badges50 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2504141 Over a year ago

. I want to ask a thing that is where i have to use this code in header of the master page or just after these two textboxes

Yasitha · Accepted Answer · 2013-08-28 11:47:11Z

1

If you need to get the element by $("#t1") t1 should be the id, not the name.

Add id="t1" to the input tag.

<input type="text" name="t1"  id="t1" />
<input type="text" name="t2" id="t2"  />

answered Aug 28, 2013 at 11:47

Yasitha

2,3034 gold badges25 silver badges39 bronze badges

Comments

Harry · Accepted Answer · 2013-08-28 11:52:54Z

1

$("#t2") would refer to an element with id="t2" but all your fields have only name and no id. You should add an id to the fields to access it.

Try changing your HTML code to be something like the below:

<input type="text" id="t1" />
<input type="text" id="t2" />
<label class="test" id="lblerror">Error</label>

You can use the below code to then compare the value of the two fields and then show/hide the label error based on the comparison result.

$("#t2").on("blur", function () {
    if ($("#t1").val() === $("#t2").val()) {
        $("#lblerror").hide();
    } else {
        $("#lblerror").show();
    }
});

edited Aug 28, 2013 at 11:52

answered Aug 28, 2013 at 11:43

Harry

90.1k26 gold badges216 silver badges224 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-08-28 11:55:52Z

1

In your html

<input type="text" name="t1" />
    <input type="text" name="t2" />

You haven'nt provided ID's

Your code Should be

<input type="text" name="t1"  id="t1" />
<input type="text" name="t2" id="t2"  />

More over you need to add blur event I guess.

$("#t2").blur(function () {
                    if ($("#t1").val() == $("#t2").val()) {
                      $("#lblerror").removeClass("test");
                    }
                    else {
                       $("#lblerror").addClass("test");  
                    } 
                });

Updated fiddle

edited Aug 28, 2013 at 11:55

answered Aug 28, 2013 at 11:41

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Comments

Sajith · Accepted Answer · 2013-08-28 11:46:45Z

0

Try something like this

$('form').submit(function(evt) {
   if ($('#textbox1').val() === $('#textbox2').val()) {
     alert('values match');
     evt.preventDefault();
   }
}

uses the .submit() method to bind to the submit event for the form, then compares the 2 values from the textboxes - if they are the same it displays an alert then prevents the default action (form submission) using event.preventDefault()

Working example demo here

answered Aug 28, 2013 at 11:46

Sajith

8565 gold badges20 silver badges48 bronze badges

Comments

Rohith Nair · Accepted Answer · 2013-08-28 11:53:29Z

0

I changed it to id instead of name and blur event instead of click

Click requires you to click it again after entering

$("#t2").blur(function () {



                        if ($("#t1").val() === $("#t2").val()) {
                         $("#lblerror").removeClass("test");

                        }
                        else {
                           $("#lblerror").addClass("test");    

                        }


    });

answered Aug 28, 2013 at 11:53

Rohith Nair

1,0701 gold badge17 silver badges33 bronze badges

Comments

Rida Fatima · Accepted Answer · 2013-08-28 11:57:03Z

0

The name attribute cannot be used as a selector this way. Moreover, in your jquery you have used "#" which selects an element on the basis of its id. Change your HTML as follows:

<input type="text" id="t1" />
<input type="text" id="t2" />
<label class="test" id="lblerror">Error</label>

edited Aug 28, 2013 at 11:57

answered Aug 28, 2013 at 11:51

Rida Fatima

12 bronze badges

Collectives™ on Stack Overflow

Comparing data of two textboxes is not working using jquery

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related