Clicking on the "Forgot Password" link should open a popup. Upon clicking the "Send email" button in the popup, a POST request should be sent and then move to the next popup for verifying the OTP.
Here is the code for the link that triggers the modal to open:
<label class="flex">Password <a href="#" class="ml-auto small" data-toggle="modal" data-target="#modal-1">Forget Password?</a></label>
Modal popup code:
<div class="modal fade" id="modal-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>Modal 1</p>
<input id="forgotPasswordEmail" type="text" class="form-control" placeholder="Email" required>
@*<a href="#modal-2" data-toggle="modal" data-dismiss="modal">Next ></a>*@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="sendOTP" type="button" class="btn btn-primary" >Send email</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
AJAX call to asp.net core controller:
<script type="text/javascript">
$("#sendOTP").click(function (e) {
alert("Hi");
e.preventDefault();
$.ajax({
type: "POST",
url: "/Auth/ForgetPassword/",
data: {
userName: $("#forgotPasswordEmail").val()
},
success: function (result) {
alert(result);
},
error: function (result) {
alert('error');
}
});
});
</script>
There seems to be an issue with triggering the function, as indicated by not receiving the alert when the AJAX function is called. Any suggestions on what might be missing would be greatly appreciated.