Make a Post request with request body from HTML form

I am working on a html page which is supposed to submit a post request with request body to my server like below

<html>
    <head>Customer app</head>
    <body>
         <div> 
             <table> 
                 <tr>
                     <td>Customer Id :</td> 
                     <td>
                         <form name="submitform" method="post">
                             <input type="text" id="customerId" name="customerId"/>
                             <input type="submit" value="Submit">
                         </form>
                     </td>
                 </tr>
             </table>
        </div>
    </body>

    <script>
    $(document).ready(function(){
        $("#submitform").click(function(e)
        {
            var MyForm = JSON.stringify($("#customerId").serializeJSON());
            console.log(MyForm);
            $.ajax({
                url : "http://localhost:7777/ola-drive/customer/ride",
                type: "POST",
                data : MyForm,

            });
            e.preventDefault(); //STOP default action

        });
    });
    </script>
</html>

It does not work as expected throwing 404 Not Found getting redirected to http://localhost:7777/customerapp.html. But form data corresponding to the request submission seems to be correct.

Can someone help me fix the issue with my html code submit POST request redirection ?