Serialize form data return empty string - serializearray

Question

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&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">

Answer 1

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&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>