使用ajax with checkbox时无法从搜索页面获取结果

Question

<form enctype="multipart/form-data">
  <table>
    <tr>
      <td>
        <font style="font-size:20px">Snp Id:</font>
      </td>
      <td><input type="text" name="isnp_id" id="isnp_id" placeholder="Ex:SCcLG07_1001342" size=20 style="font-size:18px"></td>
    </tr>
    <tr>
      <td>
        <font style="font-size:20px">Gene Id:</font>
      </td>
      <td><input type="text" name="igene" id="igene" placeholder="Ex:C.cajan_17400" size=20 style="font-size:18px"></td>
    </tr>
    <tr>
      <td>
        <font style="font-size:20px">Chromosome:</font>
      </td>
      <td><input type="text" name="ichr" id="ichr" placeholder="Ex:CcLG07" size=20 style="font-size:18px"></td>
      <td> position from </td>
      <td><input type="text" name="posstart" id="posstart" placeholder="Ex: 1" size="20"> to <input type="text" name="posend" id="posend" placeholder="Ex:100" size="20">
      </td>
    </tr>
    <tr>
      <td>
        <font style="font-size:20px">Genotype name:</font>
      </td>
      <td> <select style="font-size:18px" id="sg" name="sg">
    <option value="">Select</option>
    <option value="icpl_131">icpl_131</option>
    <option value="icpa_2039">icpa_2039 </option>
    <option value="icpl_96061">icpl_96061 </option>
     </select> </td>
      <td> between </td>
      <td> <select style="font-size:18px" id="sg2" name="sg2">
     <option  >Select</option>
     <option value="icpa_2039">icpa_2039 </option>
     <option value="icpl_131">icpl_131</option>
     <option value="icpl_96061">icpl_96061 </option>
      </select>
      </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbc" id="cbc" value="cb_class" /> </td>
      <td>
        <font style="font-size:20px">Classification:</font>
      </td>
      <td><select style="font-size:18px" name="sclass" id="sclass">
     <option value="all" selected="selected">Select</option>
     <option value="intergenic">Intergenic</option>
     <option value="intronic">Intronic</option>
     <option value="non_synonymous_coding">Non Synonymous Coding</option>
     <option value="synonymous_coding">Synonymous Coding</option>
     </select> </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbv" id="cbv" value="cb_vtype" /></td>
      <td>
        <font style="font-size:20px">Varation Type:</font>
      </td>
      <td><select style="font-size:18px" name="svtype" id="svtype">
      <option value="all" selected="selected">Select</option>
      <option value="snp">Snp</option>
      <option value="insertion">Insertion</option>
      <option value="deletion">Deletion</option>
      </select> </td>
    </tr>
    <tr>
      <td><input type="checkbox" name="cbf" id="cbf" value="cb_fc" /></td>
      <td>
        <font style="font-size:20px">Functional Class:</font>
      </td>
      <td><select style="font-size:18px" name="sfclass" id="sfclass">
        <option value="all" selected="selected">Select</option>
        <option value="missense">Missense</option>
        <option value="nonsense">Nonsense</option>
        <option value="silent">silent</option>
        </select>
      </td>
    </tr>
    <tr>
      <td><input type="reset" name="reset" value="Reset" style="font-size:18px">
        <input type="button" name="submit" id="goto" value="Search" onclick="loadData('1')" style="font-size:18px"><span id="loadings"></span></td>
    </tr>
  </table>
</form>

Now jquery ajax function code:

<script type="text/javascript">
  function loading_show() {
    $('#loadings').html("<img src='js/loader2.gif'/>").fadeIn('fast');
  }

  function loading_hide() {
    $('#loadings').fadeOut('fast');
  }

  function loadData(page) {
    $('#tbl').hide();
    loading_show();
    $.ajax({
      type: "POST",
      url: "newrs_old1.php",
      data: "page=" + page + "&isnp_id=" + $('#isnp_id').val() + "&igene=" + $('#igene').val() + "&ichr=" + $('#ichr').val() + "&posstart=" + $('#posstart').val() + "&posend=" + $('#posend').val() + "&sg=" + $('#sg').val() + "&sg2=" + $('#sg2').val() + "&cbc=" + $('#cbc').val() + "&sclass=" + $('#sclass').val() + "&cbv=" + $('#cbv').val() + "&svtype=" + $('#svtype').val() + "&cbf=" + $('#cbf').val() + "&sfclass=" + $('#sfclass').val(),
      success: function(msg) {
        $("#container1").ajaxComplete(function(event, request, settings) {
          loading_hide();
          $("#container1").html(msg);
        });
      }
    });
  }
  $(document).ready(function() {
    $(document).bind('keypress', function(e) {
      if (e.keyCode == 13) {
        $('#goto').trigger('click');
      }
    });
    $(".reset").click(function() {
      $(this).closest('form').find("input[type=text], textarea").val("");
    });
    //loadData(1);  // For first time page load default results
    $('#container1 .pagination li.active').live('click', function() {
      var page = $(this).attr('p');
      loadData(page);
    });
    $('#go_btn').live('click', function() {
      var page = parseInt($('.goto').val());
      var no_of_pages = parseInt($('.total').attr('a'));
      if (page != 0 && page <= no_of_pages) {
        loadData(page);
      } else {
        alert('Enter a PAGE between 1 and ' + no_of_pages);
        $('.goto').val("").focus();
        return false;
      }
    });
  });
</script>

Without using jQuery and AJAX, search page is working well, when i started to use jquery and ajax to make it paginate ,checkbox creating issue here. After implementation of ajax, input given in the search page is not taking by the script ,it is only taking checkbox values if checked. I can get only checkbox based search results only ,remaining search columns are not working. If i removed checkbox from ajax i can get remaining search column results. but i want both working because i am using combination search. Plz help me to solve this issue. i dont know how to implement this issue in jquery ajax

Answer 1

try using formdata to pass ajax something like

function SubmitForm() {
        var data = $("#yourform").serialize();
        var url = "Your URL"
        var form = $('#yourform')[0]
        var formdata = false;
        if (window.FormData) {
            formdata = new FormData(form);
        }
        $.ajax({
            url: url,
            type: 'POST',
            dataType: 'json',
            data: formdata ? formdata : data,
            cache: false,
            contentType: false,
            enctype: 'multipart/form-data',
            processData: false,
            success: function (data) {
//whatever
}