'Dynamically filling two fields depending on a dropdown value

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
javascriptjavaspring-bootjsp


Solution 1:[1]

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>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions