title: How Can I send the checkbox value in spring controller by ajax?
body: <p>The index.jsp is given below. I have some checkbox in my jsp page. I want to send the value to my controller and then show them in that same page after clicking submit button. I want to send the checkbox data in my controller. </p>
  
  <p>There is some picture. <a href="https://i.stack.imgur.com/Dt2YH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Dt2YH.png" alt="After click the submit button,this is the ajax response in my alert"></a></p>
  
  <p>The response is:</p>
  
  <pre><code>{"country":"United State","favfruit":null,"firstName":"r4tr54","lastName":"tytu","gender":"Female","email":"ytuyui","fruit":[]}
  </code></pre>
  
  <p>This is my index.jsp:</p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;script type="text/javascript" language="javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/json2.js"&gt;&lt;/script&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Spring Jquery Ajax Demo&lt;/title&gt;
  &lt;style&gt;
  Table.GridOne {
      padding: 3px;
      margin: 0;
      background: lightyellow;
      border-collapse: collapse;  
      width:35%;
  }
  Table.GridOne Td {  
      padding:2px;
      border: 1px solid #ff9900;
      border-collapse: collapse;
  }
  &lt;/style&gt;
  &lt;script type="text/javascript"&gt;
  
  function madeAjaxCall(){
  
       var country = $('#country').val();
       var gender = $('input:radio[name=sex]:checked').val();
       var checkboxValues = [];
       $('input.removeLater:checked').map(function() {
                   checkboxValues.push($(this).val());
       });
       alert(checkboxValues);
       var fruitstring = checkboxValues.toString();
  
      $.ajax({
          type: "post",
          url: "http://localhost:8080/SpringAjaxQuery/employee",
          cache: false,       
  
          data:'firstName=' + $("#firstName").val() 
              + "&amp;lastName=" + $("#lastName").val() 
              + "&amp;email=" + $("#email").val() 
              + "&amp;gender=" + gender 
              + "&amp;country=" + country
              + "&amp;fruit=" + checkboxValues,
  
          success: function(response){
              $('#result').html("");
              var obj = JSON.parse(response);
              alert(response);
              $('#result').html(
                      "First Name:- " + obj.firstName 
                +"&lt;/br&gt;Last Name:- " + obj.lastName  
                +"&lt;/br&gt;Email:- " + obj.email 
                +"&lt;/br&gt;Gender:- " + obj.gender 
                +"&lt;/br&gt;Country:- " + obj.country
                +"&lt;/br&gt;Fruit:-" + obj.fruit);
              document.forms["employeeForm"].reset();
          },
  
          error: function(){                      
              alert('Error while request..');
          }
      });
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="body"&gt;
      &lt;form name="employeeForm" method="post"&gt;    
          &lt;table cellpadding="0" cellspacing="0" border="1" class="GridOne"&gt;
              &lt;tr&gt;
                  &lt;td&gt;First Name&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="firstName" id="firstName" value="" onfocus="clearThis(this)"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Last Name&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="lastName" id="lastName" value=""&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Email&lt;/td&gt;
                  &lt;td&gt;&lt;input type="text" name="email" id="email" value=""&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;Country&lt;/td&gt;
                  &lt;td&gt;&lt;select id="country"&gt;
                         &lt;option value="None"&gt;-- Select --&lt;/option&gt;
                         &lt;option value="China"&gt;China&lt;/option&gt;
                         &lt;option value="United State"&gt;United State&lt;/option&gt;
                         &lt;option value="Malaysia"&gt;Malaysia&lt;/option&gt;
                         &lt;option value="Bangladesh"&gt;Bangladesh&lt;/option&gt;
                        &lt;/select&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td id="genderradio"&gt;Gender&lt;/td&gt;
                  &lt;td&gt;        &lt;input type="radio" name="sex" value="Male"&gt;Male&lt;/input&gt;
                              &lt;input type="radio" name="sex" value="Female"&gt;Female&lt;/input&gt;
                              &lt;input type="radio" name="sex" value="Unknown"&gt;Unknown&lt;/input&gt;
                                                                                            &lt;/td&gt;
              &lt;/tr&gt;
               &lt;tr&gt;
                  &lt;td&gt;Favourite Fruit&lt;/td&gt;
                  &lt;td&gt;&lt;input name="selector[]" id="ad_Checkbox1" class="removeLater" type="checkbox" value="Apple" /&gt;Apple
                      &lt;input name="selector[]" id="ad_Checkbox2" class="removeLater" type="checkbox" value="Lichi" /&gt;Lichi
                      &lt;input name="selector[]" id="ad_Checkbox3" class="removeLater" type="checkbox" value="Mango" /&gt;Mango
                      &lt;input name="selector[]" id="ad_Checkbox4" class="removeLater" type="checkbox" value="Banana" /&gt;Banana&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2" align="center"&gt;&lt;input type="button" value="Ajax Submit" onclick="madeAjaxCall();"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/form&gt;
       &lt;h1&gt;Spring Framework Jquery Ajax&lt;/h1&gt;
      &lt;div id="result"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my Controller:</p>
  
  <pre><code>@RequestMapping(method = RequestMethod.POST)
   public @ResponseBody
   Employee add(HttpServletRequest request, HttpServletResponse response , ModelMap model)
     throws Exception {
    Employee employee = new Employee();
    String firstName = request.getParameter("firstName");
    String lastName = request.getParameter("lastName");
    String email = request.getParameter("email");
    String gender = request.getParameter("gender");
    String country = request.getParameter("country");
    String[] favfruit = (String[]) request.getAttribute("selector[]");
    employee.setEmail(email);
    employee.setFirstName(firstName);
    employee.setLastName(lastName);
    employee.setGender(gender);
    employee.setCountry(country);
    employee.setFavfruit(favfruit);
  
    return employee;
   }
  </code></pre>
  
  <p>and my model is:</p>
  
  <pre><code>package com.pran.pal.simple.ajax.jquery.model;
  import java.util.ArrayList;
  import java.util.List;
  public class Employee {
  
      private String firstName;
      private String lastName;
      private String email;
      private String gender;
      private String country;
      List &lt;String&gt; fruit = new ArrayList&lt;String&gt;();
      String[] favfruit;
  
      public String[] getFavfruit() {
          return favfruit;
      }
  
      public void setFavfruit(String[] favfruit) {
              this.favfruit = favfruit;           
      }
  
      public List&lt;String&gt; getFruit() {
          return fruit;
      }
  
      public void setFruit(List&lt;String&gt; fruit) {
          this.fruit = fruit;
      }
  
      public String getFirstName() {
          return firstName;
       }
  
      public void setFirstName(String firstName) {
          this.firstName = firstName;
      }
  
      public String getLastName() {
          return lastName;
      }
  
      public void setLastName(String lastName) {
          this.lastName = lastName;
      }
  
      public String getEmail() {
          return email;
      }
  
      public void setEmail(String email) {
          this.email = email;
      }
  
      public String getGender() {
          return gender;
      }
  
      public void setGender(String gender) {
          this.gender = gender;
      }
  
      public String getCountry() {
          return country;
      }
  
      public void setCountry(String country) {
          this.country = country;
      }
  
  }
  </code></pre>