AJAX звонков с использованием. net core

Question

Я хочу открывать всплывающее окно, когда я нажимаю ссылку на забытый пароль и кнопку отправки электронной почты при всплывающем запросе отправки отправки и переходите к следующему всплывающему окну для проверки OTP

Ссылка, которая запускает модальное открытие

<label class="flex">Password <a href="#" class="ml-auto  small" data-toggle="modal" data-target="#modal-1">Forget Password?</a></label>

Модальный всплывающий код

<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 вызов asp. net основной контроллер

 <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>

Но проблема в том, что функция не запускается как я добавил предупреждение, чтобы узнать, вызывается ли функция AJAX? Может ли кто-нибудь сообщить мне, если мне что-то не хватает

Answer 1

Я не думаю, что здесь необходима «e.preventDefault ()», потому что мы обычно используем это при отправке формы через атрибут onSubmit, вы можете определить свою функцию и прослушиватель событий, как показано ниже, и я думаю, что это сработает.

$("#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');
        }
    });
});

думаю, что сработает

Answer 2

С моей стороны все в порядке. Возможно, это вызвано конфликтом идентификаторов элемента. Есть ли у вас другие элементы с таким же id sendOTP. Вы можете попробовать использовать селектор имени.

<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>

Обновление:

<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>