Jquery serializeArray not getting all fields

Question

I have this HTML:

<div id="broker_referral_block" style="display: none;">
    <label for="">* How did your broker/agent introduce you to the project?</label><br>
    <input type="radio" name="referral2" value="Site Visit" class="referral2"> Site Visit
    <br>
    <input type="radio" name="referral2" value="Conversation through social media" class="referral2"> Conversation through social media
    <br>
    <input type="radio" name="referral2" value="Referrals" class="referral2"> Referrals
    <br>
    <input type="radio" name="referral2" value="Phone Calls" class="referral2"> Phone Calls
    <br>
    <input type="radio" name="referral2" value="Developer" class="referral2"> Developer
    <br>
    <input type="radio" name="referral2" value="Other" class="referral2"> Other
</div>

I don't know why it's not included when I try to serializeArray var test = jQuery(this).serializeArray(); I don't see anything wrong. I know the display:none; is not an issue because this field:

<div id="broker_referral_block_other_field" style="display: none;">
    <input type="text" class="form-control referral2other" name="referral2other" id="referral2other">
</div>

Gets read, just without value (which is what I want). I also don't understand why everything in this block gets read:

<div id="existing_loans_block" style="display: none;">
    <label for="">* Loan</label>
    <input type="text" class="form-control existing_loans_detail" name="loan" id="loan">
    <label for="">* Amount</label>
    <input type="text" class="form-control existing_loans_detail" name="loan_amount" id="loan_amount">
    <label for="">* Monthly Amoritization</label>
    <input type="text" class="form-control existing_loans_detail" name="loan_amort" id="loan_amort">
    <label for="">* Term</label>
    <input type="text" class="form-control existing_loans_detail" name="loan_term" id="loan_term">
    <label for="">* Status</label>
    <!-- This bit does not get included too -->
    <select name="loan_status" id="loan_status" class="form-control existing_loans_detail">
        <option value="" selected disabled hidden>Select loan status...</option>
        <option value="Active">Active</option>
        <option value="Updated">Updated</option>
    </select>
</div>

Except for loan_status. All of them are properly wrapped in a form tag. This is my jquery:

jQuery("#hbcq_form").submit(function(e){
    e.preventDefault();
    var test = jQuery(this).serializeArray();
...

I did a console.log(test) and that's when I found out that referral2 and loan_status is not being included in the serialization. I also double checked, there is no name conflicts for these.

Answer 1

jQuery serialize hidden (display:none) form elemens does not work. Workaround?

check this out you can find help full answer