Question

我正在尝试使用带有ajax的电话号码发送登录表单，但是当我点击按钮时它的发送表单（刷新页面）＆amp; AJAX无法正常工作。

我的HTML（登录模式）：

            <div id="modal_new" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                            <div class="modal-dialog">
                                <form class="form-horizontal form-material" role="clientLogin" id="form" method="POST">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h4 class="modal-title" style=" font-family: 'Alef', sans-serif; font-size: 17px; ">הזינו מספר טלפון נייד להזדהות</h4> </div>
                                    <div class="modal-body">
                                        <div id="response"></div>
                                        <div id="redirect"></div>
                                                    <div class="form-group">
                                                        <input type="num" class="form-control" name="phone_number" placeholder="0526476333" id="recipient-name"> 
                                                    </div>



                                    </div>
                                    <div class="modal-footer" style="text-align:left;">
                                        <button type="button" style=" margin: 5px;font-family: 'Alef', sans-serif; " class="btn btn-outline-info" data-dismiss="modal">סגור</button>
                                        <button type="submit" style="font-family: 'Alef', sans-serif;" class="btn btn-outline-success">התחבר</button>

                                    </div>
                                </div>
                                </form>
                            </div>
                        </div>

我的JS：

    if ($("form[role=clientLogin]").length)
{
    $("form[role=clientLogin]").submit(function() {
        var url = $("#url").val();
        var data_url = url + "manage/sources/ajax/ajax.php?type=clientLogin";
        $.ajax({
            type: "POST",
            url: data_url,
            data: $('#form').serialize(),
            dataType: "json",
            success: function(data) {
                $("#response").html(data.msg);
                console.log(data.msg);
            if(data.status == "success") {
                $("#redirect").html(data.redirect);
            }
            }
        });
        return false;
    });
}

我试了好几个小时，但都失败了。我确信它与表格有关。

Answer 1

使用事件对象调用提交。如果你对此调用.preventDefault（），它应该停止默认的提交行为。例如

$("form[role=clientLogin]").submit(function(event) {
    event.preventDefault();
    ...
});

HTML模式ajax表单不起作用

1 个答案: