Need help html Form call Web API

Need help html Form call Web API

html post below is successfully consumed Web API
  1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <h1>Complex Type</h1>
        <form id="form1" method="post" action="api/updates/complex"
              enctype="application/x-www-form-urlencoded">
            <div>
                <label for="status">Status</label>
            </div>
            <div>
                <input name="status" type="text" />
            </div>
            <div>
                <label for="date">Date</label>
            </div>
            <div>
                <input name="date" type="text" />
            </div>
            <div>
                <input type="submit" value="Submit" />
            </div>
        </form>
    </body>
    </html>


After posted


Now, I want to calling Web API using jQuery. So far I've as follow
  1. <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    </head>
    <body>
        <h1>Complex Type</h1>
        <form id="form1">
            <div>
                <label for="status">Status</label>
            </div>
            <div>
                <input name="status" type="text" />
            </div>
            <div>
                <label for="date">Date</label>
            </div>
            <div>
                <input name="date" type="text" />
            </div>

            <div>
                <span id="message"></span>
            </div>

            <div>

                <input type="submit" value="Submit" />
                <script type="text/javascript">
                    $("#form1").submit(function () {
                        var jqxhr = $.post('api/updates/complex', $('#form1').serialize())
                            .success(function () {
                                var loc = jqxhr.getResponseHeader('Location');
                                var a = $('<a/>', { href: loc, text: loc });
                                $('#message').html(a);
                            })
                            .error(function () {
                                $('#message').html("Error posting the update.");
                            });
                        return false;
                    });
                </script>

            </div>

        </form>
    </body>
    </html>

TestPageJSCallAPI.html


TestPageJSCallAPI.html after submit was pressed



Nothing happened. Why word Invoked! not printed?

Please help