title: How to submit both data from an input element and an array of Ids from a JSP function?
body: <p>I'm new to web development and learning the most as "I go along". I'm using  Spring-MVC for the server side and JSP, JQuery and CSS for client side. Up until now I have a simple page that contains 2 time-pickers (jquery) and a list of <code>&lt;div&gt;s</code> each contains item data and a check box. When clicked the submit button the whole data was submitted as a form and received as <code>@RequestParam-s</code> in my <code>Controller</code>. In my next step I wanted each <code>&lt;div&gt;</code> to have a functionality as a checkbox: I implemented a <code>toggle</code> function that changes the <code>&lt;div&gt;</code> background and collects the relevant Ids. Now my question is how do I submit this data to the server (time-picker and array of Ids)? Do I need to build a <code>JSON</code> object and submit it? Can I have an example of how to retrieve the var array data from the <code>toggle</code> function and the time from the <code>input element</code>?<br/>
  Here is a snippet from my html:</p>
  
  <pre><code>&lt;div class="container" &gt;
      &lt;label class="TimeLabel" &gt;Start:&lt;/label&gt;
      &lt;input type="text" style="width: 3em;" id="timepicker_start" name="timepicker_start" value="09:00" /&gt;
      &lt;label class="TimeLabel"&gt;End:&lt;/label&gt;
      &lt;input type="text" style="width: 3em;" id="timepicker_end" name="timepicker_end" value="18:00" /&gt;
  &lt;div/&gt;
  ...
  &lt;!-- item only list --&gt;     
  &lt;div class="container"&gt;
    &lt;ul class="plainList"&gt;
      &lt;c:forEach items="${itemsFrom.itemsOnly}" var="item" varStatus="status"&gt;            
        &lt;li&gt;
          &lt;div class="inner"&gt;
            &lt;img src="resources/images/${item.id}.png"&gt;           
            &lt;ul class="plainList"&gt;             
              &lt;li&gt;&lt;h4&gt;${item.title} &amp;trade;&lt;/h4&gt;&lt;/li&gt;              
              &lt;li&gt;&lt;h5&gt;${item.description}&lt;/h5&gt;&lt;/li&gt;            
            &lt;/ul&gt;              
            &lt;div style="clear: both"&gt;&lt;/div&gt;           
          &lt;/div&gt;           
        &lt;/li&gt;         
      &lt;/c:forEach&gt;      
    &lt;/ul&gt;     
  &lt;/div&gt; 
  </code></pre>
  
  <p>and my function:<br/></p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
      var count = 0;
      var attrIds = new Array();
      $(function() {
          $(".inner").toggle(function() {
              $(this).css("background", "#2E8B57");
              attrIds.push(this.id);
              count++;
              $("section").find("#attrCount").text(count);
          }, function() {
              $(this).css("background", "#dcdcdc");
              attrIds.splice($.inArray(this.id, attrIds),1);
              count--;
              $("section").find("#attrCount").text(count);
          });
      });
  &lt;/script&gt;
  </code></pre>