How To Get Form Field Value And Send To Server As Json Using Ajax Jquery

I have search form with 6 fields and 1 search button. when user fill the form deatails and click on search button, i need to send the form field values as json to server using jque

Solution 1:

First of all you will need to change you HTML form code to include name attribute in the textfields like below

<formname="NAME"id="customerDetailSearchForm"action=""><fieldset><legend>Search Contact</legend><tablewidth="100%"cellpadding="0"cellspacing="0"class="vzuui-detailpanel"><tr><td><label>Name :</label><inputtype="text"value=""name="name" /></td><td><label>City :</label><inputtype="text"value=""name="city" /></td><td><label>Phone :</label><inputtype="text"value=""name="phone" /></td></tr><tr><td><label>Address :</label><inputtype="text"value=""name="address" /></td><td><label>State Prov :</label><inputtype="text"value=""name="state" /></td><td><label>Email :</label><inputtype="text"value=""name="email" /></td></tr></table></fieldset><buttonclass="vzuui-btn-red-active closeedit"type="button"id="search">Search</button>

This is required because we will be using jQuery serializeArray() Method which creates an array of objects (name and value) by serializing form values.

Now the jQuery part to form the JSON data from your form and make the AJAX call.

<scripttype="text/javascript">
$(document).ready(function(){
  $("#search").click(function(){

     var frm = $("customerDetailSearchForm").serializeArray();
      var obj = {};
      for (var a = 0; a < frm.length; a++) {
         obj[frm[a].name] = frm[a].value;
      }
        var jsonData = JSON.stringify(obj);

    $.ajax({ 
        type: 'GET', 
        url: 'http://example.com', 
        data: jsonData , 
        dataType: 'json',
        success: function (data) { 
           // add result to UI code over here
        }
    });
  });
});
</script>

EDIT

The above javascript snippet edited to generate proper JSON value

Solution 2:

Here is simple Ajax Code that I use in Asp.net MVC I think This will help you,

$.ajax({
                beforeSend: function (xhr) {
                    AjaxRequestStart();
                },
                error: function (result) {
                                     },
                complete: function () {
                    AjaxRequestFinish();
                },
                url: '@Url.Content("~/Project/SaveProject")',
                type: 'POST',
                data: $('#frmAddProject').serialize(),
                success: function (result) {

                }
            });

Solution 3:

Here i agree with @Aniket. add name first for each input type.

<formname="NAME"id="customerDetailSearchForm"action="your_url"><fieldset><legend>Search Contact</legend><tablewidth="100%"cellpadding="0"cellspacing="0"class="vzuui-detailpanel"><tr><td><label>Name :</label><inputtype="text"value=""name="name" /></td><td><label>City :</label><inputtype="text"value=""name="city" /></td><td><label>Phone :</label><inputtype="text"value=""name="phone" /></td></tr><tr><td><label>Address :</label><inputtype="text"value=""name="address" /></td><td><label>State Prov :</label><inputtype="text"value=""name="state" /></td><td><label>Email :</label><inputtype="text"value=""name="email" /></td></tr></table></fieldset><buttonclass="vzuui-btn-red-active closeedit"onclick="_submit();"type="button"id="search">Search</button>

For calling ajax, you can use this.

function _submit{
       $.ajax({
                type: 'POST',
                dataType: 'json',
                url: 'your_url',
                data: $("#customerDetailSearchForm").serialize(),
                success: function(responseData, textStatus) {
                    // you implementation logic here
                },
                complete: function(textStatus) {

                },
                error: function(responseData)
                {

                }
            });
        }

Solution 4:

Here you go

Convert form data to JavaScript object with jQuery

But before that you have to add name attribute for each input element.

So that name will be your json key and the data in the box will be value of that key as below

<input name='username' value='' />

Will become

{"username": "john"}

jhon is value entered in input box.

**edit (Ajax code) **

$(function() {
    $('#customerDetailSearchForm').submit(function() {
     $.post("//your URL here",JSON.stringify($('#customerDetailSearchForm').serializeObject()), function(result){

        alert("Data posted successfully!!");

    });
  });
});

or replace below line if you dont have submit button in the form

$('#customerDetailSearchForm').submit(function() {

with

$('#search').click(function() {

Solution 5:

You can refer below sample ajax call on form submit

    $("#customerDetailSearchForm").submit(function(e) {

             var postData = $('#conatctUs').serializeArray();
             var formURL = $('#conatctUs').attr("action");
             var formName  = $('#conatctUs').attr('name');

             $.ajax({
                    url : formURL,
                    type: "POST",
                    data : postData,
                    success:function(data)
                    {
                        if(data.status){
                            console.log(data);
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown)
                    {

                    }


            e.preventDefault(); 
    });