Html form submit after ajax

Question

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>

add use the **this** keyword where there is anonymity in detecting the event submitter...otherwise it creates confusion ...go for id Selector # — Rohit Kumar, Nov 05 '17 at 11:32

score 2 · Answer 1 · edited Nov 05 '17 at 12:43

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

Jesus.. 2h looking in to this and I had the Id on the wrong element the whole time... Thx! — Andreas, Nov 05 '17 at 11:27
I have spent days because of a misplaced class name :( hence observation has improved with time — Rohit Kumar, Nov 05 '17 at 11:29

score 0 · Accepted Answer · edited Nov 05 '17 at 12:37

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;
        }
    });
});

score 0 · Answer 3 · edited Nov 05 '17 at 11:59

0

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.

edited Nov 05 '17 at 11:59

answered Nov 05 '17 at 11:32

Vig

342
1
7

Html form submit after ajax

3 Answers3