Cannot pass value from form on submission
Adamhumbug opened this issue · comments
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.