Cannot pass value from form on submission

[Adam Hewitt]

jquery-confirm version:
v3.7.0

I'm submitting a ... (check one with "x")
[ ] bug report
[ ] feature request
[X] support request

Current behavior:
I have a select box that is populated by PHP. When trying to pass its value i am getting undefined

Expected behavior:
I should be at least able to console log the value

Steps to reproduce:

Related code:

$.confirm({
title: 'Change Location Of ' + $name,
content: "

" +
"Currently: " + $locationId + "" +
"" +
"",
type: 'blue',
typeAnimated: true,
escapeKey: true,
backgroundDismiss: true,
buttons: {
formSubmit: {
text: 'Change Location',
btnClass: 'btn-blue',
action: function() {
var loc = this.$content.find('#name option:selected').val()

                                                    console.log(loc)
                                                    
                                                }
                                            },
                                            close: {
                                                text: 'Close',
                                                action: function() {}
                                            }

                                        },
                                        onContentReady: function() {
                                            // bind to events
                                            var jc = this;
                                            this.$content.find('form').on('submit', function(e) {
                                                // if the user submits the form by pressing enter in the field.
                                                e.preventDefault();
                                                jc.$$formSubmit.trigger('click'); // reference the button and click it
                                            });
                                        }
                                    });

insert any relevant code here.

Here is the HTML that is rendered on the page:

                            `<div class="jconfirm jconfirm-light jconfirm-open">
<div class="jconfirm-bg"
    style="transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1);"></div>
<div class="jconfirm-scrollpane">
    <div class="jconfirm-row">
        <div class="jconfirm-cell">
            <div class="jconfirm-holder" style="padding-top: 40px; padding-bottom: 40px;">
                <div class="jc-bs3-container container">
                    <div
                        class="jc-bs3-row row justify-content-md-center justify-content-sm-center justify-content-xs-center justify-content-lg-center">
                        <div class="jconfirm-box-container jconfirm-animated col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1 jconfirm-no-transition"
                            style="transform: translate(0px); transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1);">
                            <div class="jconfirm-box jconfirm-hilight-shake jconfirm-type-blue jconfirm-type-animated"
                                role="dialog" aria-labelledby="jconfirm-box17419" tabindex="-1"
                                style="transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1); transition-property: all, margin;">
                                <div class="jconfirm-closeIcon" style="display: none;">×</div>
                                <div class="jconfirm-title-c"><span class="jconfirm-icon-c"></span><span
                                        class="jconfirm-title">Change Location Of HH1</span></div>
                                <div class="jconfirm-content-pane no-scroll"
                                    style="transition-duration: 0.4s; transition-timing-function: cubic-bezier(0.36, 0.55, 0.19, 1); height: 70px; max-height: 655.183px;">
                                    <div class="jconfirm-content" id="jconfirm-box17419">
                                        <div>
                                            <form action="" class="formName">
                                                <label class="mb-2">Currently: LOC2</label>
                                                    <select name="locationId" id="locationId"
                                                    class="form-control">
                                                    <option value="0" disabled="" selected="">Please Select...
                                                    </option>
                                                    <option value="1">Main Ent - Main, VIP</option>
                                                    <option value="2">LOC 2 - Special</option>
                                                </select></form>
                                        </div>
                                    </div>
                                </div>
                                <div class="jconfirm-buttons"><button type="button" class="btn btn-blue">Change
                                        Location</button>
                                    <button type="button" class="btn btn-default">
                                        Close

                                    </button>
                                </div>
                                <div class="jconfirm-clear">

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

`

Other information:
Just console logging this.$content.find('#name').val() also gives me undefined.