CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Andreas
Andreas

Reputation: 865

Html form submit after ajax

Trying to make some database validation with Jquery Get method before submitting a form. But I get the error

Uncaught TypeError: form.submit is not a function

Got the logic form here

Simplified Code below (but the err is still there...)

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

Upvotes: 1

Views: 428

Answers (3)

Rohit Kumar
Rohit Kumar

Reputation: 1782

Because after clicking button this would mean the current button and

insertCertificateForm was never a form anyways...it was Div

best would be to bind the form with an 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>

and also load your scripts in the head

Upvotes: 2

Casper
Casper

Reputation: 1539

Your selector is wrong $('#insertCertificateForm'), if you want to do like this you need to add this id into your form <form id="insertCertificateForm" otherwise follow this way,

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

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

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

Upvotes: 0

Vig
Vig

Reputation: 339

That's because you're calling this and not $(this) when declaring the form variable. You can either declare it as $(this) or use $(form) to submit the form.

Upvotes: 0

Related Questions