CODEWITHSUNDEEP
jqueryhtmlasp.net
user2504141
user2504141

Reputation: 67

Comparing data of two textboxes is not working using jquery

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.

Upvotes: 0

Views: 4725

Answers (7)

Rida Fatima
Rida Fatima

Reputation: 1

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>

Upvotes: 0

Suresh Atta
Suresh Atta

Reputation: 121998

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

Upvotes: 1

Rohith Nair
Rohith Nair

Reputation: 1070

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");    

                        }


    });

Upvotes: 0

Harry
Harry

Reputation: 89750

$("#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();
    }
});

Upvotes: 1

Amit
Amit

Reputation: 15387

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

Upvotes: 4

Yasitha
Yasitha

Reputation: 2303

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"  />

Upvotes: 1

Sajith
Sajith

Reputation: 856

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

Upvotes: 0

Related Questions