jQuery Ошибка запроса Ajax

Question

У меня возникла проблема в запросе ajax jQuery. Как только я отправляю запрос с помощью ajax в качестве сообщения или даже получаю. Он продолжает добавлять NaNundefiened. clearNaNgreen

[JavaScript];

$("#btnSubmit1").click(function() { 
    var criminality = $('select#criminality option:selected').val(); 
    var color1 = $("select#color1 option:selected").val(); 
    var business = $("select#business option:selected").val(); 
    var color2 = $("select#color2 option:selected").val(); 
    var civil = $("select#civil option:selected").val(); 
    var color3 = $("select#color3 option:selected").val(); 
    var bankruptcy = $("select#bankruptcy option:selected").val(); 
    var color4 = $("select#color4 option:selected").val(); 
    var education = $("select#education option:selected").val(); 
    var color5 = $("select#color5 option:selected").val(); 
    var candidateID = $("input#choosecandidate_hidden").val(); 

    var dataString = 'criminality='+ criminality + '&color1=' + color1 + '&business=' + business 
         + '&color2='+ color2 + '&civil=' + civil + '&color3=' + color3 + '&bankruptcy=' + bankruptcy+ 
         + '&color4='+ color4 + '&education=' + education + '&color5=' + color5+ 
         + '&report_status='+ report_status + '&color9=' + color9+'&report_form_name=report_form1&candidate_id='+candidateID; 
         //alert (dataString);return false; 

    $.ajax({ 
     type: "POST", 
     url: "report_submit_ajax.php", 
     data: dataString, 
     success: function() { 
      alert('Form has been sumbmitted successfully'); 
     } 
    }); 

    return false; 
}); 

[HTML]

<form id="report_form1" class="form" name="report_form"> 
    <fieldset> 
     <legend>Executive Summary:</legend> 
     <table cellspacing="10" border="0"> 
      <tbody> 
       <tr> 
        <td><b>Criminality/Integrity Check</b></td> 
        <td><select id="criminality" name="criminality"> 
          <option value="clear">Clear</option> 
          <option value="verified">Verified</option> 
          <option value="verified_des_mijor">Verified with Major Discrepancy</option> 
          <option value="verified_des_minor">Verified with Minor Discrepancy</option> 
         </select></td> 
        <td><select id="color1" name="color1"> 
          <option style="color: green;" value="green">Green</option> 
          <option style="color: blue;" value="blue">Blue</option> 
          <option style="color: yellow;" value="yellow">Yellow</option> 
          <option style="color: red;" value="red">Red</option> 
         </select></td> 
       </tr> 
       <tr> 
        <td><b>Highest Education Check</b></td> 
        <td><select id="education" name="education"> 
          <option value="clear">Clear</option> 
          <option value="verified">Verified</option> 
          <option value="verified_des_mijor">Verified with Major Discrepancy</option> 
          <option value="verified_des_minor">Verified with Minor Discrepancy</option> 
         </select></td> 
        <td><select id="color5" name="color5"> 
          <option style="color: green;" value="green">Green</option> 
          <option style="color: blue;" value="blue">Blue</option> 
          <option style="color: yellow;" value="yellow">Yellow</option> 
          <option style="color: red;" value="red">Red</option> 
         </select></td> 
       </tr> 
       <tr> 
        <td><b>Second Profession Reference Check</b></td> 
        <td><select id="employment_check_2" name="employment_check_2"> 
          <option value="clear">Clear</option> 
          <option value="verified">Verified</option> 
          <option value="verified_des_mijor">Verified with Major Discrepancy</option> 
          <option value="verified_des_minor">Verified with Minor Discrepancy</option> 
         </select></td> 
        <td><select id="color7" name="color7"> 
          <option style="color: green;" value="green">Green</option> 
          <option style="color: blue;" value="blue">Blue</option> 
          <option style="color: yellow;" value="yellow">Yellow</option> 
          <option style="color: red;" value="red">Red</option> 
         </select></td> 
       </tr> 
       <tr> 
        <td><b>Report Status</b></td> 
        <td><select id="report_status" name="report_status"> 
          <option value="clear">Clear</option> 
          <option value="verified">Verified</option> 
          <option value="verified_des_mijor">Verified with Major Discrepancy</option> 
          <option value="verified_des_minor">Verified with Minor Discrepancy</option> 
         </select></td> 
        <td><select id="color9" name="color9"> 
          <option style="color: green;" value="green">Green</option> 
          <option style="color: blue;" value="blue">Blue</option> 
          <option style="color: yellow;" value="yellow">Yellow</option> 
          <option style="color: red;" value="red">Red</option> 
         </select></td> 
       </tr> 
      </tbody> 
     </table> 
    </fieldset> 
    <input id="btnSubmit1" type="button" name="btnSubmit1" value="Update"> 
</form> 

вот точное сообщение я получаю

bankruptcy undefinedNaNundefined 
business undefined 
candidate_id 78 
civil undefined 
color1 green 
color2 undefined 
color3 undefined 
color5 greenNaNundefined 
color6 undefined 
color8 undefinedNaNclear 
color9 green 
criminality clear 
education clear 
employment_check_2 clearNaNgreen 
professional_reference undefined 
report_form_name report_form1 

Как вы можете видеть, это порождает такие смешные слова. Любое решение?

Answer 1

Ваши селекторы возвращают дефферентные элементы, чем вы ожидаете. В результате в некоторых случаях вы получаете неопределенные значения или значения NaN (не-число), которые иногда объединяются друг с другом из-за способа объединения нескольких значений.

Я настоятельно рекомендую использовать JavaScript-отладчик в вашем браузере (обычно доступен F12) и проверять результаты каждого выражения $ (....).

Answer 2

проверить его здесь ... http://jsfiddle.net/laupkram/5RF6j/

некоторые элементы отсутствуют на то, что вы дали нам, так что создает неопределенными

Answer 3

$("#btnSubmit1").live('click', function (e) { 
      e.preventDefault(); 

      alert($('form#report_form1').serialize()); 

      $.ajax({ 
       type: "POST", 
       url: "report_submit_ajax.php", 
       data: $('form#report_form1').serialize(), 
       success: function() { 
        alert('Form has been sumbmitted successfully'); 
       } 
      }); 

      //return false; 
     });​ 

для живого DEOM смотрите по этой ссылке: http://jsfiddle.net/nanoquantumtech/5RF6j/1/

для ссылка см. эту ссылку: http://api.jquery.com/serialize/