AJAX calls using .net core

Question

I want to open a popup when I click on forgot password link and on send email button on pop send post request and move to next popup for verifying the OTP

Link which triggers 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">&times;</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>

But the issue is that function is not triggered as I have added an alert to get if the AJAX function is getting called? Can anyone let me know if I am missing anything

Answer 1

It's Ok on my side. Perhaps this is caused by the element's id conflict. Do you have any other elements with the same id sendOTP . You can try to use name selector.

<button id="sendOTP" name="sendOTP" type="button" class="btn btn-primary" >Send email</button>


<script type="text/javascript">
    $("[name=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>

Update:

<button id="sendOTP" onclick="sendOTP()" type="button" class="btn btn-primary">Send email</button>

<script type="text/javascript">
    function sendOTP() {
        alert("Hi");
        $.ajax({
            type: "POST",
            url: "/Auth/ForgetPassword/",
            data: {
                userName: $("#forgotPasswordEmail").val()
            },
            success: function (result) {
                alert(result);
            },
            error: function (result) {
                alert('error');
            }
        });
    }
</script>

Answer 2

i don't think "e.preventDefault()" is necessary is here because we usually use this when submitting a form via onSubmit attribute in you can define your function and event listener like below and i think it will work.

$("#buttonId or...").click(function () {
    alert("Hi");
    $.ajax({
        type: "POST",
        url: "/Auth/ForgetPassword/",
        data: {
            userName: $("#forgotPasswordEmail").val()
        },
        success: function (result) {
            alert(result);
        },
        error: function (result) {
            alert('error');
        }
    });
});

i think that will work