how to get form field value and send to server as json using ajax jquery

Question

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 jquery ajax.

then the server will send the search values and returns the response, then i need to populate those valuse in ui. i need sample UI code for jquery ajax . please can anyone help on this? below is my html form

<form name="NAME" id="customerDetailSearchForm" action="">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" /></td>
           <td><label>City :</label><input type="text" value="" /></td>
           <td><label>Phone :</label><input type="text" value="" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" /></td>
           <td><label>State Prov :</label><input type="text" value="" /></td>
           <td><label>Email :</label><input type="text" value="" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="vzuui-btn-red-active closeedit" type="button" id="search">Search</button>

`$('#customerDetailSearchForm').serialize()` will grab all the `data` from `form` — Rayon, Apr 12 '16 at 05:54
$('#customerDetailSearchForm').serialize() stored into single variable and send to server — HARDIK SHAH, Apr 12 '16 at 05:57
[Serialize form data to JSON](http://stackoverflow.com/questions/11338774/serialize-form-data-to-json) — Rino Raj, Apr 12 '16 at 05:59
ok. i need sample ajax code for hit the sevice. can u give me the sample ajax code to hit the service. — Ganesh sah, Apr 12 '16 at 06:04

score 0 · Answer 1 · edited May 23 '17 at 11:50

0

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() {

edited May 23 '17 at 11:50

Community

1
1

answered Apr 12 '16 at 06:04

kakurala

824
6
15

ok. i need sample ajax code for hit the sevice. can u give me the sample ajax code to hit the service – Ganesh sah Apr 12 '16 at 06:10
Amended in the post, try it – kakurala Apr 12 '16 at 06:55
Hi All. I have used @Aniket code. Now it is working fine. Thanks all – Ganesh sah Apr 12 '16 at 07:25

score 0 · Answer 2 · answered Apr 12 '16 at 06:14

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

                }
            });

Aniket Paul · Accepted Answer · 2016-04-12T07:42:13.470

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

<form name="NAME" id="customerDetailSearchForm" action="">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="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.

<script type="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

Hi Aniket, i have implemented ur code but im getting error. json value also not coming properly when i use var jsonData = JSON.stringify(frm); Console Error: http://url.com?[{"name":"name","value":"jhon"},{"name":"city","value":"us"},{"name":"phone","value":"9897896581"},{"name":"address","value":"Colianielna"},{"name":"state","value":"Ustance"},{"name":"email","value":"jhon@domain.com"}] 405 (Method Not Allowed) — Ganesh sah, Apr 12 '16 at 06:47
Hello Ganesh, the code that I shared uses GET method.. You can see that I mentioned it as type: 'GET'. HTTP 405 error means you are using the wrong method, so I assume maybe the service that you are calling uses POST method. Confirm the same and use the appropriate method accordingly. As for the improper JSON value check my edited answer — Aniket Paul, Apr 12 '16 at 07:38
Hi Aniket, i made those changes now it is working fine. Thanks for helping me to solve this issue. — Ganesh sah, Apr 12 '16 at 11:17

score 0 · Answer 4 · answered Apr 12 '16 at 06:27

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

<form name="NAME" id="customerDetailSearchForm" action="your_url">
  <fieldset>
     <legend>Search Contact</legend>
     <table width="100%" cellpadding="0" cellspacing="0" class="vzuui-detailpanel">
        <tr>
           <td><label>Name :</label><input type="text" value="" name="name" /></td>
           <td><label>City :</label><input type="text" value="" name="city" /></td>
           <td><label>Phone :</label><input type="text" value="" name="phone" /></td>
        </tr>
        <tr>
           <td><label>Address :</label><input type="text" value="" name="address" /></td>
           <td><label>State Prov :</label><input type="text" value="" name="state" /></td>
           <td><label>Email :</label><input type="text" value="" name="email" /></td>
        </tr>
     </table>
  </fieldset>
   <button class="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)
                {

                }
            });
        }

score 0 · Answer 5 · answered Apr 12 '16 at 06:37

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

how to get form field value and send to server as json using ajax jquery

5 Answers5

Linked