CODEWITHSUNDEEP
javascriptjquery
abaft
abaft

Reputation: 152

Selecting a specific child element in JQuery?

I have a form that can occur up to 8 times on a page so adding in ID's into the objects is not a solution. I need to enable the submit button when the 2 fields are the same. I cannot think of a way to do it. please can you help me?

HTML

<form method="post">
<div class="form-group">
    <label for="pass1">New Password:</label>
    <input type="password" class="form-control" name="pass1" placeholder="Pa55word">
</div>
<div class="form-group">
    <label for="pass2">Retype Password:</label>
    <input type="password" class="form-control" name="pass2" placeholder="Pa55word">
</div>
</div>
<div class="modal-footer">
    <input type="submit" name="subpass" class="btn btn-primary disabled" value="go" />
</form>

JavaScript

$('form input[type="password"]').keyup(function () {
if($(this.???)){
   $(this.???)removeClass('disabled')
}
});

JsFiddle Link

Upvotes: 1

Views: 117

Answers (3)

Minko Gechev
Minko Gechev

Reputation: 25682

You can use:

$('form input[type="password"]').keyup(function () {
  var form = $(this).closest('form');
  if(form.find('input[type="password"]').first().val() === 
     form.find('input[type="password"]').last().val()){
    form.find('input[type="submit"]').removeAttr('disabled'); //or remove class
  } else {
    form.find('input[type="submit"]').attr('disabled', ''); //disable the button
  }
});

Here is an example in JSFiddle http://jsfiddle.net/3uURp/3/

And here is how it works with few forms at once http://jsfiddle.net/3uURp/6/

Upvotes: 1

pgolm
pgolm

Reputation: 46

Try this:

$('form input[type="password"]').keyup(function () {
  var form = $(this).closest('form')
  var pass1 = form.find('input[name=pass1]')
  var pass2 = form.find('input[name=pass2]')
  var submit = form.find('input[type=submit]')

  var condition = pass1.val().length == 0 || (pass1.val() != pass2.val())
  submit.attr("disabled", condition)
});

Upvotes: 0

Goran.it
Goran.it

Reputation: 6297

Working example:

$('form input[type="password"]').keyup(function () {
    var $this = $(this);
    var $parent = $this.closest("div");
    if( $this.val() == $this.closest("form").find("div.form-group").not($parent).find("input").val() ){
       console.log("equals");
    } else {
        console.log("not equals");
    }
});

JSFIDDLE

Upvotes: 0

Related Questions