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":"[email protected]","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 )); });

user786 · Accepted Answer · 2015-05-28 10:45:20Z

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",... }

thanks, but my servermethod parameters are multiples: {"name":"abcd","email":"[email protected]","phone":"12356984"}, how do i pass it?
Updated my answer. If you really need to pass multiple parameters then just separate them with ","
it's not multiple parameter, they're 3 form elements. So i am bit confused a bit

Abhinav · Accepted Answer · 2015-05-28 09:53:20Z

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

Collectives™ on Stack Overflow

Form submission and serialize in jquery

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related