I am trying to automate some form filling.
But i am having an issue with a field which is drop down with an autocomplete search bar. The drop down shows after completing 3 characters.
https://i.stack.imgur.com/GniwI.png[
^]
<div class="col-md-10" data-select2-id="34">
<select class="form-control select2-hidden-accessible" name="PrimarySponser.SponserInsurerID" id="PrimarySponser_SponserInsurerID" style="width: 100%" data-select2-id="PrimarySponser_SponserInsurerID" tabindex="-1" aria-hidden="true">
</select>
</div>
The following same code when selecting a value.
<div class="col-md-10" data-select2-id="34">
<select class="form-control select2-hidden-accessible" name="PrimarySponser.SponserInsurerID" id="PrimarySponser_SponserInsurerID" style="width: 100%" data-select2-id="PrimarySponser_SponserInsurerID" tabindex="-1" aria-hidden="true">
<option value="9" data-select2-id="42">
Funded Mandates administration
</option>
</select>
The script to that field
var PrimarySponser_PatientSponserID = 0;
var SecondarySponser_PatientSponserID = 0;
fnFillSponserInfo();
function fnFillSponserInfo(){
if (PrimarySponser_PatientSponserID > 0)
{
var primaryPayer = new Option('', 0, false, false);
$('#PrimarySponser_SponserInsurerID').append(primaryPayer).trigger('change');
var primaryNetwork = new Option('', 0, false, false);
$('#PrimarySponser_PayerNetworkID').append(primaryNetwork).trigger('change');
var primaryPackage = new Option('', 0, false, false);
$('#PrimarySponser_SponserPackageID').append(primaryPackage).trigger('change');
}
}
$('#PrimarySponser_SponserInsurerID').select2({
ajax: {
url: '/Search/Payers',
data: function (params) {
var query = {
term: params.term
}
return query;
},
processResults: function (data) {
return {
results: data.items
};
}
},
minimumInputLength: 3, placeholder: 'Select a payer'
});
$('#PrimarySponser_PayerNetworkID').select2({
placeholder: 'Select a network'
});
$('#PrimarySponser_SponserPackageID').select2({
placeholder: 'Select a package'
});
$('#PrimarySponser_SponserInsurerID').on('select2:select', function (e) {
var data = e.params.data;
loadPayerNetworks(data.id, "PrimarySponser");
});
$('#PrimarySponser_PayerNetworkID').on('select2:select', function (e) {
var data = e.params.data;
loadPayerPackages(data.id, "PrimarySponser");[enter image description here][2]
});
function loadPayerNetworks(id,type) {
$('#'+ type +'_PayerNetworkID').select2('data', null);
$('#' + type + '_SponserPackageID').select2('data', null);
$('#' + type + '_PayerNetworkID').select2({
ajax: {
url: '/Search/PayerNetworksByPayerId?id=' + id,
processResults: function (data) {
return {
results: data.items
};
}
}
});
}
I think the values are taken from another url. Is there a way to fill the field with value from another url.
I am a novice in coding. Is there something that I am nor understanding or missed something.
What I have tried:
I am currently using the following code to auto fill fields. The second line is to auto click the save button.
document.getElementById('PrimarySponser_SponserInsurerID').value="9"
document.getElementsByClassName("btn btn-success waves-effect waves-light")[0].click();