I have to click twice on a jquery button to submit a registeration form

Question

I have this page that hides the submit button if the passwords do not match. If they match the button appears but it needs to be clicked twice to submit the form.

html page

jquery

function checkPasswordMatch() {
    var Password = $("#txtNewPassword").val();
    var Repassword = $("#txtConfirmPassword").val();

    if (Password != Repassword)
        $("#divCheckPasswordMatch").html(' !خطأ: الرقم السري غير متطابق ');
    else
        $("#divCheckPasswordMatch").html('');
}

$(document).ready(function () {
   $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

Edit added snippet

function checkPasswordMatch() {
  var Password = $("#txtNewPassword").val();
  var Repassword = $("#txtConfirmPassword").val();

  if (Password != Repassword)
    $("#divCheckPasswordMatch").html(' !خطأ: الرقم السري غير متطابق ');
  else
    $("#divCheckPasswordMatch").html('');
}

$(document).ready(function() {
  $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

// for testing, don't want to actually submit
$("form").on("submit", function() {
   console.log("submit");
   return false;
});

user_2181514 · Answer

The issue is not that you have to click it twice, it's that it's being recreated when you click it, so you're not actually clicking it the first time.

You have both

onChange="checkPasswordMatch();"

and

$("#txtConfirmPassword").keyup(checkPasswordMatch);

so when you type the same 2nd password, the button appears, you then immediately "click" on that button, but, as you mouse-down to click the onChange fires, deletes your button and creates a new one, which won't register your "click" as it didn't get a mouse-down.

You can confirm this: type the same 2nd password, then click outside the 2nd input (but not on the button) then click the button and it works ok.

Alternatively, remove the extra onchange= and use either antiquated onXX= or jquery event handlers, don't mix and match them.

Updated snippet:

function checkPasswordMatch() {
  var Password = $("#txtNewPassword").val();
  var Repassword = $("#txtConfirmPassword").val();

  if (Password != Repassword)
    $("#divCheckPasswordMatch").html(' !خطأ: الرقم السري غير متطابق ');
  else
    $("#divCheckPasswordMatch").html('');
}

$(document).ready(function() {
  $("#txtConfirmPassword").keyup(checkPasswordMatch);
});

// for testing, don't want to actually submit
$("form").on("submit", function() {
   console.log("submit");
   return false;
});

user_295783 · Answer

Why not just show and hide it?

function checkPasswordMatch() {
  var Password = $("#txtNewPassword").val();
  var Repassword = $("#txtConfirmPassword").val();
  return Password === Repassword;
}

$(function() {
  $("form").on("change", function() {
    const ok = checkPasswordMatch();
    $("[type=submit]").toggle(ok)
    $(".alert").toggle(!ok)
  });
});

.hide {
  display: none
}



  
  
  
  
   
   !خطأ: الرقم السري غير متطابق

I have to click twice on a jquery button to submit a registeration form

2 Answers