John Davidson

javascript - A pop up window for OTP verification after submitting form

0 comments
Message:


So here is my code using ajax to load php and insert values into database.


<script type="text/javascript">
$(document).ready(function(){
$('#regBtn').click(function(){
event.preventDefault();
$.ajax({
url:"register.php",
type:"POST",
data: $('#myForm').serialize(),
beforeSend: function() {
$('#RepMsg').fadeIn();
$('#RepMsg').html('Sending OTP...');
},
success:function(response){
if(response == 1){
$('#RepMsg').fadeIn();
$('#RepMsg').html('<i class="fa-solid fa-triangle-exclamation"
style="color:red; font-size:11px;"></i>This Email is already
Taken.')
}else{
window.location.replace('verify.php');
}
}
})
});
});
</script>

So what I want now is to replace that redirect link of verify.php to a pop up menu where I can enter OTP instead of directing it to whole new page.



My Answer:
html



OTP Verification


















In this code, when the form is submitted, it sends an AJAX request to a PHP file `verify_otp.php` with the email entered by the user. The PHP file generates an OTP and sends it to the user's email. Then, a pop-up window is displayed asking the user to enter the OTP. When the user clicks on the "Verify OTP" button, another AJAX request is sent to the PHP file with the entered OTP. The PHP file verifies the OTP and sends a response back to the JavaScript. If the OTP is correct, an alert is shown to the user.

Rate this post

4 of 5 based on 2580 votes

Comments




© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us