When attempting to obtain an OTP, the event.preventDefault() function is functioning properly. However, after updating the register-form for OTP verification, the event.preventDefault() function ceases to work.
How could this happen? Your assistance is greatly appreciated! Thank you in advance!!!
Essentially, my goal is to have a form initially containing an input field and a "Get OTP" button. Upon clicking the Get OTP button with a valid 10-digit number, I want to transition to another form where OTP verification takes place. This second form includes an input field for entering OTP and a "Verify OTP" button. The script should compare the entered OTP with a hardcoded value of 4444. However, the jQuery function preventDefault() fails in this context, redirecting me to a POST request route instead.
$(document).ready(() => {
//get otp form
$('#get-otp').submit(e => {
e.preventDefault();
let number = e.target.elements.number.value;
number = number.trim();
if (number.length !== 10) {
$('#msg').text("Please enter a valid 10-digit number.");
$('.alert').css('display', 'block');
setTimeout(() => {
$('.alert').css('display', 'none');
}, 3000);
} else {
$('#msg').text("Please enter the valid OTP below.");
$('.register-form').html(`<form action="" id="verify-otp" method="post">
<div class="col col-sm-12 input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-keyboard-o icon"></i></span>
</div>
<input type="number" name="otp" id="otp" class="form-control" placeholder="Enter OTP here" />
</div>
<div class="checkbox" >
<label><input type="checkbox" />
<a class="terms" data-toggle="modal" data-target="#terms_conditions-modal">
<span>Agree to terms & conditions</span>
</a>
</label>
</div>
<div class="btn-req-otp">
<button type="submit"
style="background-color: #002e6e; color: white;" onclick="function verifyOtp()" class="btn">Verify OTP</button>
</div>
</form>`);
$('.alert').css('display', 'block');
setTimeout(() => {
$('.alert').css('display', 'none');
}, 3000);
}
});
// verify otp form
$('#verify-otp').submit(e => {
e.preventDefault();
alert("ooo");
let otp = e.target.elements.otp.value;
otp = number.trim();
if (otp === 4444) {
$('#msg').text("Please enter a valid 4-digit OTP.");
$('.alert').css('display', 'block');
setTimeout(() => {
$('.alert').css('display', 'none');
}, 3000);
} else {
$('input[type="checkbox"]').click(function () {
if ($(this).prop("checked") == true) {
alert("Successfully registered!!!!!!");
}
else if ($(this).prop("checked") == false) {
$('#msg').text("Please Accept our Terms & Conditions.");
$('.alert').css('display', 'block');
setTimeout(() => {
$('.alert').css('display', 'none');
}, 3000);
}
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="container">
<div class="col col-lg-6 col-md-8 col-sm-12 offset-lg-3 offset-md-2 box">
<div class="alert alert-danger alert-dismissible fade show"
style="padding: 2px; text-align: center; display: none;" role="alert">
<span id="msg"></span>
<button type="button" class="close" data-dismiss="alert" aria-label="Close" style="padding: inherit;">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="register-box">
<div class="row register-welcome">
<!-- dynamically change -->
<h2 class="text-center">Welcome to Serv Udyam...</h2>
<h4>A smart search for your smart home</h4>
</div>
<div class="row register-form">
<form action="" id="get-otp" method="post">
<div class="col col-sm-12 input-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fa fa-mobile icon"></i></span>
</div>
<select>
<option>+91</option>
</select>
<input type="number" name="number" id="number" class="form-control"
placeholder="Enter Mobile No." autocomplete="off" />
</div>
<div class="btn-req-otp">
<button type="submit" style="background-color: #002e6e; color: white;" class="btn">Get
OTP</button>
</div>
</form>
</div>
<div class="row vendor-link">
<div>
<h6>Are you a vendor instead?</h6>
<a style="display: block; text-align: center;" href="#">Click Here</a>
</div>
</div>
</div>
</div>
</div>
<!-- Terms Conditions modal -->
<div class="modal" tabindex="-1" id="terms_conditions-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Terms and Conditions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>1.Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Dolor in impedit debitis ipsa quidem. Facilis velit consectetur quos ut sit?</p>
<p>2.Lorem ipsum, dolor sit amet consectetur adipisicing elit.
Dolor in impedit debitis ipsa quidem. Facilis velit consectetur quos ut sit?</p>
</div>
</div>
</div>
</div>
<footer class="footer">© 2020 Serv Udyam</footer>
</body>