Make a Post request with request body from HTML form

Question

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 ?

score 2 · Accepted Answer · answered Aug 13 '17 at 18:05

Your issue is in this line:

$("#submitform").click(function(e)

Your form does not have an id but a name, so you can write:

$('[name="submitform"]').click(function(e)

That is the reason because your form is giving you a redirection error.

$('[name="submitform"]').click(function (e) {
    e.preventDefault(); 
    $.ajax({
        url: "http://localhost:7777/ola-drive/customer/ride",
        type: "POST",
        data: {"customerId": $("#customerId").val()},
        success: function (result) {
            //do somthing here
        }
    });
});

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


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

Still i am getting the same issue, request getting redirected to http://localhost:7777/customerapp.html and throws 404 not found error — Aarish Ramesh, Aug 13 '17 at 18:16
The REST APIS are working fine. It is just this error which i get on clicking submit "Request URL:http://localhost:7777/customerapp.html Request Method:POST" — Aarish Ramesh, Aug 13 '17 at 18:50

score 0 · Answer 2 · answered Aug 13 '17 at 18:04

0

You are already created form using html, you can add action attrbiute with value for post url like

   <form name="submitform" method="post" action="/ola-drive/customer/ride">

Unless you want to use ajax, you create your data form manually

answered Aug 13 '17 at 18:04

Haitham Adnan Mubarak

283
3
7

Yes I want to create form data as JSON which why I am not using action attribute and constructing form data payload in ajax – Aarish Ramesh Aug 13 '17 at 18:05
The from will be submitted once you click on submit button – Haitham Adnan Mubarak Aug 13 '17 at 18:05
In this case you shoyuldn't use **form** tag an submit button as you want to handle it manually, check this https://stackoverflow.com/questions/1960240/jquery-ajax-submit-form – Haitham Adnan Mubarak Aug 13 '17 at 18:07
I think, you should either use form or ajax form post with out form element, form element has the ability to serialize the input parameters already, but using ajax you should format the values by yourself – Haitham Adnan Mubarak Aug 13 '17 at 18:20

score -1 · Answer 3 · answered Aug 13 '17 at 18:22

you have this:

 $("#submitform").click(function(e){...}

The first problem is you are selecting an input tag, instead the Form. The second is rather the action desired, in this case should be "submit". And if you already are using JQuery you might be interested in save some space using the method 'serialize()'. Try:

$('form').on('sumbit', function(e){
  e.preventDefault();
  $.ajax({
    url: // your path
    type: 'post',
    data: $(this).seialize(),
    ...})
 })

And use an id for Form, it's easier to select it.

Make a Post request with request body from HTML form

3 Answers3