my php page contain the following html/jquery for password field validation. Below is my code
<form method="post" action="http://localhost:7070/FFTFinals/inverse-php/index.php?getPage=iChgPass" align="center"> Current Password:<br> <input type="password" name="currentPassword"><span id="currentPassword" class="required"></span> <br> New Password:<br> <input type="password" id="newPassword" name="newPassword"><span id="newPassword" class="required"></span> <br> Confirm Password:<br> <input type="password" id="confirmPassword" name="confirmPassword"><span id="confirmPassword" class="required"></span> <br> <div class="registrationFormAlert" style="color:green;" id="CheckPasswordMatch"> <script> function checkPasswordMatch() { var password = $("#newPassword").val(); var confirmPassword = $("#confirmPassword").val(); if (password != confirmPassword) $("#CheckPasswordMatch").html("Passwords does not match!"); else $("#CheckPasswordMatch").html("Passwords match."); } $(document).ready(function () { $("#confirmPassword").keyup(checkPasswordMatch); }); </script> <br> <input id="submit" type="submit" name="submit" value="Submit" /> </form>
The problem is when I input values in new password fields the validation works well but the submit button is disappearing ? is there something I missing ? I found this code snippet from web. Please help to solve this code.
Advertisement
Answer
Your input might be inside the div that’s getting it’s content replaced using .html()
. Simply get it out if that’s the case. But in your code as is, you’re not closing the div properly.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <form method="post" action="http://localhost:7070/FFTFinals/inverse-php/index.php?getPage=iChgPass" align="center"> Current Password:<br> <input type="password" name="currentPassword"><span id="currentPassword" class="required"></span> <br> New Password:<br> <input type="password" id="newPassword" name="newPassword"><span id="newPassword" class="required"></span> <br> Confirm Password:<br> <input type="password" id="confirmPassword" name="confirmPassword"><span id="confirmPassword" class="required"></span> <br> <div class="registrationFormAlert" style="color:green;" id="CheckPasswordMatch"> <script> function checkPasswordMatch() { var password = $("#newPassword").val(); var confirmPassword = $("#confirmPassword").val(); if (password != confirmPassword) $("#CheckPasswordMatch").html("Passwords does not match!"); else $("#CheckPasswordMatch").html("Passwords match."); } $(document).ready(function() { $("#confirmPassword").keyup(checkPasswordMatch); }); </script> <br> </div> <input id="submit" type="submit" name="submit" value="Submit" /> </form>