Facing problem with jQuery AJAX

Facing problem with jQuery AJAX

JSPPage_1:

<form id="myForm">
      <select id="sub" name="sub">
            <option val="1">1</option>
            <option val="2">2</option>
            <option val="3">3</option>
      </select>

      <select id="month" name="month">
            <option val="JAN">JAN</option>
            <option val="FEB">FEB</option>
            <option val="MAR">MAR</option>
      </select>

      <input type="button" type="submit" id="go"/>
</form>

<script type="text/javascript">

$(document).ready(function(){
var selectedSub ="";
var selectedMonth= "";
var formData = $('#myForm').serialize(selectedSub , selectedMonth);
$("#sub").change(function(){
    selectedSub = $("#sub").val();
});

$("#month").change(function(){
    selectedMonth= $("#month").val();
});

$('#go').click(function(){
    $.ajax({
    type: "POST",
    url: "../jsps/JSPPage_2.jsp",
    data: formData,
    async: true,
    cache: false,
    success: function(data, textStatus, jqXHR)
          {
              $('#chart').removeAttr("style");
              alert(formData);
           }
       });
     });
 });
</script>

<div id="chart" style="visibility: hidden">
    <%@ include file="JSPPage_2.jsp" %>
</div>

JSPPage_2.jsp
<% String s = request.getParameter("formData");%>

<input type="text" value="<%= s %>"/>

============================================================================

The alert(formData) is showing me the exact values I want [in the format: &sub=2+&month=MAR] but in the textbox I am getting null. I even tried another method by removing the form element and var formData and replacing the data part as:
data:({
          selSub: selectedSub,
          selMonthYear: selectedMonth
       }),

But the result is same, null value in textbox. Because the data of selSub or selMonthYear is not getting set. What I am missing. Please please help. Cant figure out where and what is going wrong.

Nil