How to implement old and new password for particular user?

Question

I am bit confused about the scenario where need to change old password to new password of particular user. For this, I get every user by their user id and there, I applied a check for onkeyup. In this part, I am printing message in span tag whenever any user presses any key to generate new password respective of their old password. But the thing is, when I submit the changes, form submitted for unmatched passwords also.

<script>
$('#opassword, #confirm_password').on('keyup', function () {
        if ($('#opassword').val() == $('#confirm_password').val()) {
            $('#error-message').html('Password Matching').css('color', 'green');
        } else {
            $('#error-message').html('Password Not Matching').css('color', 'red');
        }           
    });

function updatepassword(){
        var userid = document.getElementById('sp_customerid').value;
        var oldpassword = document.getElementById('opassword').value;
        var password = document.getElementById('confirm_password').value;
        if (oldpassword == password) {
            alert("Password matched")
        } else {
            alert("Password do not matched! Please try again later")
        }
        var url = "../api/resetpassword";
        $.post(url, {
            userid : userid,
            password : password,
        }, function(data, status) {
            if (data.status == "OK") {
                if (data.statusCode == 1) {
                    $('#updatepasswordmodal').modal('hide');
                } else {
                    var error = data.responseMessage;
                    swal(error, "", "error");
                }
            } else {
                var error = data.responseMessage;
                swal(error, "", "error");
            }
        });
    }
</script>

Answer 1

You should put the $.post() in the allowed branch of your updatepassword() code. (I supposed oldpassword == password is the branch that should go.)

$('#opassword, #confirm_password').on('keyup', function() {
  if ($('#opassword').val() == $('#confirm_password').val()) {
    $('#error-message').html('Password Matching').css('color', 'green');
  } else {
    $('#error-message').html('Password Not Matching').css('color', 'red');
  }
});

function updatepassword() {
  var userid = document.getElementById('sp_customerid').value;
  var oldpassword = document.getElementById('opassword').value;
  var password = document.getElementById('confirm_password').value;
  if (oldpassword == password) {
    alert("Password matched")
    var url = "../api/resetpassword";
    $.post(url, {
      userid: userid,
      password: password,
    }, function(data, status) {
      if (data.status == "OK") {
        if (data.statusCode == 1) {
          $('#updatepasswordmodal').modal('hide');
        } else {
          var error = data.responseMessage;
          swal(error, "", "error");
        }
      } else {
        var error = data.responseMessage;
        swal(error, "", "error");
      }
    });
  } else {
    alert("Password do not matched! Please try again later")
  }
}

SUGGESTION

Break up your functions into smaller pieces: it is much easier to see the steps if they are only a couple of lines long, and have very few "responsibilities" (the best if a function does only 1 thing, not more):

function getUpdatePasswordData() {
  var oldpassword = document.getElementById('opassword').value;
  var password = document.getElementById('confirm_password').value;
  var userid = document.getElementById('sp_customerid').value;
  return {
    userid,
    password,
    oldpassword
  }
}

function comparePasswords() {
  const { oldpassword, password } = getUpdatePasswordData()
  return oldpassword == password
}

$('#opassword, #confirm_password').on('keyup', function() {
  if (comparePasswords()) {
    $('#error-message').html('Password Matching').css('color', 'green');
  } else {
    $('#error-message').html('Password Not Matching').css('color', 'red');
  }
});

function postNewPassword(userid, password) {
  var url = "../api/resetpassword";
  $.post(url, {
    userid,
    password,
  }, function(data, status) {
    if (data.status == "OK") {
      if (data.statusCode == 1) {
        $('#updatepasswordmodal').modal('hide');
      } else {
        var error = data.responseMessage;
        swal(error, "", "error");
      }
    } else {
      var error = data.responseMessage;
      swal(error, "", "error");
    }
  });
}

function updatepassword() {
  const { userid, password } = getUpdatePasswordData()
  if (comparePasswords()) {
    alert("Password matched")
    postNewPassword(userid, password)
  } else {
    alert("Password do not matched! Please try again later")
  }
}