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

Answers 1

  • 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


Related Articles