Hi I am using select2 in a plugin. Select is in a form. I am changing selected value from dropdown but on submit of the form, selected value is not changing. Probably I am using wrong something in javascript.
This is velocity file.
$webResourceManager.requireResource("com.atlassian.auiplugin:ajs")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-badge")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-icon")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-select2")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-forms")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-form-validation")
$webResourceManager.requireResource("com.atlassian.auiplugin:aui-expander-trigger")
//Some other code.....
<div class="aui-dialog2-content" id="run-dialog--description">
<form class="aui" id="case-run-list-form">
<fieldset class="field-group">
<legend>
<label for="environment-select-hey">
Select which environment to run
</label>
</legend>
<select
id="environment-select-hey"
>
#foreach($environment in $environments)
<option value="$environment.environmentName">$environment.environmentName</option>
#end
</select>
</fieldset>
<fieldset class="group"
data-aui-validation-field
data-aui-validation-minchecked="1">
<legend><span>Mark cases to run</span></legend>
#foreach( $dialogCase in $source.cases)
<div class="checkbox">
<input type="checkbox" name="$dialogCase.caseId"
id="$dialogCase.parentId"
>
<label for="$dialogCase.parentId">
$dialogCase.name</label>
</div>
#end
</fieldset>
<div class="buttons-container">
<div class="buttons">
<input class="aui-button aui-button-primary submit"
type="submit" value="Run" id="comment-save-button">
</div>
</div>
</form>
</div>
And this is my javascript file
document.addEventListener('DOMContentLoaded', function (event) {
AJS.toInit(function () {
AJS.$("#environment-select-hey").auiSelect2();
// Show Dialog
AJS.$("#startTestIcon").on('click', function (e) {
e.preventDefault();
AJS.dialog2("#demo-dialog").show();
});
// Hides the dialog
AJS.$("#dialog-submit-button").on('click', function (e) {
AJS.dialog2("#demo-dialog").hide();
});
AJS.$('#case-run-list-form').on('aui-valid-submit', function (event) {
console.log("selectedValue:", AJS.$("#environment-select-hey").val());
event.preventDefault();
});
})
});
SelectedValue console.log always logging the same value even if I changed the value of dropdown. What am I doing wrong?
