ajax后提交HTML表单答案

【问题标题】：Html form submit after ajaxajax后提交HTML表单
【发布时间】：2017-11-05 11:21:39
【问题描述】：

在提交表单之前尝试使用 Jquery Get 方法进行一些数据库验证。但我得到了错误

未捕获的类型错误：form.submit 不是函数

得到逻辑表格here

下面的简化代码（但错误仍然存在......）

<html>
<body>
    <div id="insertCertificateForm">
        <form action="/Certificates/Insert" method="post">
            <div>
                <label>Charge</label>
                <input name="Charge" id="Charge" />
            </div>
            <input type="submit" value="Insert" class="btn btn-default" />
        </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        $('#insertCertificateForm').submit(function (e) {
            e.preventDefault();
            var form = this;

            var Charge = $('#Charge').val();

            $.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
                if (data) {
                    form.submit();
                }
                else {
                    return false;
                }
            });
        });</script>
</body>
</html>

【问题讨论】：

可能是因为 form =this 没有返回表单
做一个console.log(form)来验证自己
添加使用 this 关键字来检测事件提交者的匿名性...否则会造成混乱 ...go for id Selector #

标签： javascript jquery html forms

【解决方案1】：

因为点击按钮后this将意味着当前按钮和

insertCertificateForm 从来都不是表单……它是 Div

最好将表单与 ID #myForm

绑定

<html>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <body>
        <div id="insertCertificateForm">
            <form  id="Myform" action="/Certificates/Insert" method="post">
                <div>
                    <label>Charge</label>
                    <input name="Charge" id="Charge" />
                </div>
                <input type="submit" value="Insert" class="btn btn-default" />
            </form>
        </div>

        <script>
            $('#insertCertificateForm').submit(function (e) {
                e.preventDefault();
                var form = $("#Myform");

                var Charge = $('#Charge').val();

                $.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
                    if (data) {
                        form.submit();
                    } else {
                        return false;
                    }
                });
            });
        </script>
    </body>
</html>

并在头部加载您的脚本

【讨论】：

Jesus.. 2h 看着这个，我一直把 Id 放在错误的元素上......谢谢！
因为类名放错了位置，我花了好几天的时间 :( 因此观察随着时间的推移而有所改善

【解决方案2】：

您的选择器错误$('#insertCertificateForm')，如果您想这样做，您需要将此ID添加到您的表单中<form id="insertCertificateForm"，否则请按照此方式，

$('form').submit(function (e) {
    e.preventDefault();

    var Charge = $('#Charge').val();

    $.get("/Certificates/CheckIfChargeIsUnique", { Charge: Charge }, function (data) {
        if (data) {
            $(this).submit();
        } else {
            return false;
        }
    });
});

【讨论】：

【解决方案3】：

那是因为您在声明表单变量时调用的是this 而不是$(this)。您可以将其声明为$(this) 或使用$(form) 提交表单。

【讨论】：