Serialize form data return empty string

I apologize if my question is duplicate. I studied all same issue and did the following: 1. remove all disabled input field. 2. check if there any id is repeated. No id is repeated. 3. Every form field has a name. But the following code return empty string:

$('#answer_sheet_btn').click(function(e){
        e.preventDefault();
        console.log( $( this ).serializeArray() );

  });

Here is my form:

<form method="post" action="/wordpress/wp-admin/admin.php?page=active-exam&amp;exam_id=1" id="question_paper">
        <p></p><table class="bix-tbl-container" style="height: 40px" border="0" width="533" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="bix-td-qtxt" valign="top">If 60 J of energy are available for every 15 C of charge, what is the voltage?</td>
</tr>
</tbody>
</table><p></p>
    <input name="opt1[]" type="checkbox" value="1">60 V <input name="opt1[]" type="checkbox" value="2">4 V  <input name="opt1[]" type="checkbox" value="3">15 V <input name="opt1[]" type="checkbox" value="4">.25 V    <hr>

    <p>Which resistive component is designed to be temperature sensitive?</p>
    <input name="opt2[]" type="checkbox" value="1">Rheostat <input name="opt2[]" type="checkbox" value="2">Thermistor   <input name="opt2[]" type="checkbox" value="3">Potentiometer    <input name="opt2[]" type="checkbox" value="4">Photoconductive cell <hr>

<input type="hidden" name="q_ids" value="1,2">
<p class="submit">
    <input type="submit" name="answer_sheet" id="answer_sheet_btn" class="button-primary" value="submit">
</p>

</form>

This kill my day. I think I am doing some stupid type mistake. Please point it out.

N.B: I tried removing the hidden field

<input type="hidden" name="q_ids" value="1,2">

Solution

According to .serializeArray()

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery collection of forms and/or form controls.

You should handle the form submit action and then serialize the form:

$('#question_paper').submit(function(e){
    e.preventDefault();
    console.log( $(this).serializeArray() );
});

$('#question_paper').submit(function(e){
    e.preventDefault();
    console.log( $(this).serializeArray() );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="/wordpress/wp-admin/admin.php?page=active-exam&amp;exam_id=1" id="question_paper">
  <p></p>
  <table class="bix-tbl-container" style="height: 40px" border="0" width="533" cellspacing="0" cellpadding="0">
<tbody>
  <tr>
    <td class="bix-td-qtxt" valign="top">If 60 J of energy are available for every 15 C of charge, what is the voltage?</td>
  </tr>
</tbody>
  </table>
  <p></p>
  <input name="opt1[]" type="checkbox" value="1">60 V
  <input name="opt1[]" type="checkbox" value="2">4 V
  <input name="opt1[]" type="checkbox" value="3">15 V
  <input name="opt1[]" type="checkbox" value="4">.25 V
  <hr>

  <p>Which resistive component is designed to be temperature sensitive?</p>
  <input name="opt2[]" type="checkbox" value="1">Rheostat
  <input name="opt2[]" type="checkbox" value="2">Thermistor
  <input name="opt2[]" type="checkbox" value="3">Potentiometer
  <input name="opt2[]" type="checkbox" value="4">Photoconductive cell
  <hr>

  <input type="hidden" name="q_ids" value="1,2">
  <p class="submit">
<input type="submit" name="answer_sheet" id="answer_sheet_btn" class="button-primary" value="submit">
  </p>

</form>