Form submission and serialize in jquery

Question

I have the following form and I need to make AJAX call on submission of the form. How to do in jQuery by serializing?

<form class="form-horizontal">
<fieldset>

   <legend>Please Fill in the Online Form</legend>

<div class="form-group">
  <label for="inputEmail" class="col-lg-2 control-label">Name</label>
  <div class="col-lg-10">
    <input type="text" class="form-control formWidth" id="inputEmail" placeholder="Name" required>
  </div>
</div>
<div class="form-group">
  <div class="col-lg-10 col-lg-offset-2">
    <button type="reset" class="btn btn-default">Cancel</button>
    <button type="submit" class="btn btn-primary">Submit</button>
  </div>
</div>

 </fieldset>
 </form>

My request response format is:

http://10.23.25.36:8081/mytest/user/register
{"name":"abcd","email":"pow.122@gmail.com","phone":"12356984"}
  {
      "message": "SMS SENT",
      "status": "SUCCESS",
  }

What's wrong with this?:

$(document).ready(function() {


   alert("hello");

   $('.form-horizontal').on('submit', function(e){

       alert("inside form submit");
       var postData = $(this).serialize();
        var formURL = "http://10.23.25.36:8081/mytest/user/register";

    $.ajax({
        url : formURL,
        type:"POST",
        data : postData,
        dataType:"json",
        done:function(msg){
            setSuceessMsg(msg);
        },
        fail:function(jqXhr, textStatus){
            alert("Error in response" + textStatus);
        },
        always:function(msg){
            alert("In always");
        }
    });
    e.preventDefault(); //STOP default action
    //e.unbind(); //unbind. to stop multiple form submit.
});

$("#ajaxform").submit(); //Submit  the FORM

(function ( $ ) {

    $.fn.setSuceessMsg = function(msg) {

        return this;
    };

}( jQuery ));
});

Answer 1

All you need to do is

  var str = $( "form" ).serialize();

send str to server via ajax call.

Ajax syntax

     $.ajax({
            type: "POST",
            url: yourserverURL, // the method we are calling
            contentType: "application/json; charset=utf-8",
            data: { "YourServerMethodParameter": JSON.stringify(str),"YourServerMethodParameter2":"value" },
             dataType:"json",
            success: function (result) {
                alert(result.responseText);
                //do something                    
                //..
                //.. 

            },
            error: function (result) {
                alert('Oh no aa :(' + result[0]);
            }

        });

Update

Your $("form").serialize() gives you string. That contain names and values of your input field. If your web method expect parameters for name,email, and phone then it's better that you send them separately. like

 data: { "name": "value","email":"value2",... }

Answer 2

Here's what you can do.

var yourdata = $("form").serialize();

$.ajax({
    url: "phpfile.php",
    type: "POST",
    contentType: "application/json; charset=utf-8",
    data: {data: yourData}, 
    success: function(data) {        
        // Do stuff when the AJAX call returns
    }
});