Enable button when two inputs are the same

Question

I have two passwords input, i want my validate button to be clickable when the two inputs are the same.

reset.pug

block content
    div#content.center-align
        p
            span#main.bold=trad.mainTitle
            br     
        input#pass(type='password',placeholder='' + trad.textplaceholder)
        input#pass(type='password',placeholder='' + trad.validpass)
        button#validate(value=token) #{trad.button}

this is my ajax function

$('#validate').bind( 'click', function(e) {
    let token = e.target.value
    // let pass1 =  $('#pass1').val()
    let pass = $('#pass').val()
    if (pass !== '') {
        $.post('/reset-password', {'pass': pass, 'token': token}, function (res) {
            console.log(res)
            if (res.err) {
                $('#hiddenErr').removeClass('hide')
            } else {
                $('#hiddenSuccess').removeClass('hide')
                setTimeout(function () {
                    window.location = '/'
                }, 10000)
            }
        })
    } else {
        console.log('wrong password')
    }
})

Duplicate of this question? [Button disable unless both input fields have value](https://stackoverflow.com/questions/5248159/button-disable-unless-both-input-fields-have-value) — Moshe Binieli, Sep 26 '18 at 22:21

score 1 · Answer 1 · answered Sep 26 '18 at 22:25

It's not strictly speaking an error, but you're using the same id on two html elements on the same page which can lead to strange behavior. It's better to use a class when you have two elements that are similar, or use two separate id's.

With classes do this:

block content
  div#content.center-align
    span#main.bold=trad.mainTitle
    br     
    input.pass(type='password',placeholder='' + trad.textplaceholder)
    input.pass(type='password',placeholder='' + trad.validpass)
    button#validate(value=token) #{trad.button}

script.
  function isMatchingPassword(){

    var passwords = [];

    $('.pass').each(function(index, element){
      passwords.push( $(element).val() );
    });

    if( passwords[0] === passwords[1] ){
      return true;
    } else {
      return false;
    }

  }

With id's do this:

block content
  div#content.center-align
    span#main.bold=trad.mainTitle
    br     
    input#pass1(type='password',placeholder='' + trad.textplaceholder)
    input#pass2(type='password',placeholder='' + trad.validpass)
    button#validate(value=token) #{trad.button}

script.
  function isMatchingPassword(){

    if( $('#pass1').val() === $('#pass2').val() ){
      return true;
    } else {
      return false;
    }

  }

The id solution is easier of course, but it doesn't scale very well past two or three elements.

score 1 · Answer 2 · answered Sep 26 '18 at 22:25

You can subsribe to the 'input' event for the two input boxes, like this:

$('#pass, #pass1').on('input', function()
{
 $('#validate').prop('disabled') = $('#pass').val() != $('#pass1').val();
});

Now , when user types in either of the boxes, the '#validate' button will be disabled, if the two values differ.

Enable button when two inputs are the same

2 Answers2