I have a database server name recommendation list coming from the backend, where "driverName" and "connectionURL" for that driver should auto-populate once the user picks a server. I know it's possible to accomplish it with javascript, but I'm new to the language. Could someone please assist me?
<div class="form-group">
<form:label path="databaseServer">Database Server:</form:label>
<form:select path="databaseServer" class="form-control">
<form:option value="None" label="Please Select a Database Server"/>
<form:options items="${command.databaseServerMap}" />
</form:select>
</div>
<div class="form-group">
<form:label path="driverName">Driver Name:</form:label>
<form:input path="driverName" class="form-control" readonly="true"/>
</div>
<div class="form-group">
<form:label path="connectionURL">connection URL:</form:label>
<form:input path="connectionURL" class="form-control" readonly="true"/>
</div>
These are the maps I'm working with on the backend.
public Map<String, String> getDatabaseServerMap() {
Map<String, String> driverList = new LinkedHashMap<>();
driverList.put("MySQL", "MySQL");
driverList.put("Postgres", "Postgres");
return driverList;
}
[1]: https://i.stack.imgur.com/HKUWd.png
This javaScript code was effective.
<script>
$(function () {
$('.selectDatabase').change(function(){
// console.log( $(this).val() );
const driverName=$('.driverName');
const connectionURL = $('.connectionURL');
if($(this).val()==='MySQL'){
driverName.val('com.microsoft.sqlserver.jdbc.SQLServerDriver');
connectionURL.val('jdbc:sqlserver://localhost:1433;databaseName=database');
driverName.attr('readonly',true);
connectionURL.attr('readonly',true);
}else if($(this).val()==='Other'){
driverName.val('');
connectionURL.val('');
driverName.attr('readonly',false);
connectionURL.attr('readonly',false);
}else{
driverName.val('');
connectionURL.val('');
driverName.attr('readonly',true);
connectionURL.attr('readonly',true);
}
});
});
</script>
<div class="form-group">
<form:label path="databaseServer">Database Server:</form:label>
<form:select path="databaseServer" class="form-control selectDatabase">
<form:option value="None" label="Please Select a Database Server"/>
<form:options items="${command.databaseServerMap}" />
</form:select>
</div>
<div class="form-group">
<form:label path="driverName">Driver Name:</form:label>
<form:input path="driverName" class="form-control driverName" readonly="true"/>
</div>