Saving checkbox data from a html web form to a Google Spreadsheet

Question

My function script works well aside from the fact that checkbox values are not being picked by the function. Instead those particular columns simply show undefined in the spreadsheet cells. What is my function missing that would make it pick the checkbox values from the html web form?

my html form:

<form id="registration-form" action="https://script.google.com/macros/s/AKfycbx_fFp-WWHLvRV4SgSq-JPklxwZIyZnCD_04-zHzUYhjcwGpier/exec">
        <div class="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="large-12 cell">
                    <fieldset>
                        <label>Check In:
                            <input type="date" name="checkin_date">
                        </label>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <label>Check Out:
                            <input type="date" name="checkout_date">
                        </label>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <legend>I will attend the IDIA meeting on 24<sup>th</sup> to 25<sup>th</sup> May</sup> (Please note this is a closed meeting for IDIA members only)</legend>
                        <input id="checkboxno" type="checkbox" name="attending_IDIA_meeting"><label for="checkboxno">Yes</label>
                        <input id="checkboxyes" type="checkbox" name="not_attending_IDIA_meeting"><label for="checkboxyes">No</label>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <legend>I will take a transit hotel accommodation on:</legend>
                        <br>
                        <input id="checkbox1" type="checkbox" name="twenty"><label for="checkbox1" style="font-size: 16px;">20<sup>th</sup> May 2018</label>
                        <input id="checkbox2" type="checkbox" name="twenty_one"><label for="checkbox2" style="font-size: 16px;">21<sup>st</sup> May 2018</label>
                        <input id="checkbox3" type="checkbox" name="twenty_two"><label for="checkbox3" style="font-size: 16px;">22<sup>nd</sup> May 2018</label>
                        <input id="checkbox3" type="checkbox" name="twenty_three"><label for="checkbox3" style="font-size: 16px;">23<sup>rd</sup> May 2018</label>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <label style="font-size: 15px;"> Transit Hotel Venue: (If invisible below, venue has been automatically set to Eka Hotel)
                            <input type="text" value="Eka Hotel" name="transit_venue" readonly>
                        </label>
                    </fieldset>
                    <hr>
                    <fieldset>
                        <legend>I will participate in the Learning visit on 24<sup>th</sup> May</legend>
                       <input id="attending_Learning_visit" type="checkbox" name="no"><label for="learningvisitno">Yes</label>
                    <input id="not_attending_Learning_visit" type="checkbox" name="yes"><label for="learningvisityes">No</label>
                    </fieldset>
                    <br>
                    <fieldset>
                        <label>Any other additional information you may wish to provide?
                            <textarea name="additional_info" rows="4"></textarea>
                        </label>
                    </fieldset>
                    <hr>
                    <button type="submit" class="button large expanded primary" style="background-color: #F26522;" id="submit-form">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>

Jquery/ajax code:

 <script type="text/javascript">
    var $form = $('form#registration-form'),
    url = 'https://script.google.com/macros/s/AKfycbx_fFp-WWHLvRV4SgSq-JPklxwZIyZnCD_04-zHzUYhjcwGpier/exec'
    $('#submit-form').on('click', function(e) {
        e.preventDefault();
        var jqxhr = $.ajax({
            url: url,
            method: "GET",
            dataType: "jsonp",
            data: $form.serializeObject()
        }).success(
        // will add my success message here
        );
    })
</script>

code.gs:

    var lock = LockService.getPublicLock();
    lock.waitLock(30000); // wait 30 seconds before conceding defeat.

try {
    // next set where we write the data - you could write to multiple/alternate destinations
    var doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty("key"));
    var sheet = doc.getSheetByName(SHEET_NAME);

    // we'll assume header is in row 1 but you can override with header_row in GET/POST data
    var headRow = e.parameter.header_row || 1;
    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
    var nextRow = sheet.getLastRow() + 1; // get next row
    var row = [];
    // loop through the header columns
    for (i in headers) {
        if (headers[i] == "Timestamp") { // special case if you include a 'Timestamp' column
            row.push(new Date());
        } else { // else use header name to get data
            row.push(e.parameter[headers[i]]);
        }
    }
    // more efficient to set values as [][] array than individually
    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
    // return json success results
    return ContentService
        .createTextOutput(JSON.stringify({
            "result": "success",
            "row": nextRow
        }))
        .setMimeType(ContentService.MimeType.JSON);
} catch (e) {
    // if error return this
    return ContentService
        .createTextOutput(JSON.stringify({
            "result": "error",
            "error": e
        }))
        .setMimeType(ContentService.MimeType.JSON);
} finally { //release lock
    lock.releaseLock();
}
}

function setup() {
    var doc = SpreadsheetApp.getActiveSpreadsheet();
    SCRIPT_PROP.setProperty("key", doc.getId());
}

Answer 1

If you want it to write a value only when the checkbox is checked, try adding a value attribute to your checkbox elements, e.g.

<input id="checkboxno" type="checkbox" name="attending_IDIA_meeting" value="true"><label for="checkboxno">Yes</label>

If you want it to write a value when it is checked or not checked, consider switching to an option input. See jQuery serialize does not register checkboxes for more detail on this. It seems like an option input might work better for your purposes anyway.