JSP - Javascript, Update table fields based on select option value

Question

I have been searching the internet for 2 days but I couldn't find any specific solution to my problem.

As I am a newbie I couldn't figure out how to do this;

I have a database table with 2 column. Material Code and Description.

On my JSP page, I have a table. A first column is a select option with material codes from the database.

Based on this selection the matching description must appear in the second column. This is the part I couldn't manage to do.Here is the code.

 </head>
    <body>
        <%
            Class.forName("com.mysql.jdbc.Driver").newInstance();
            String url = "jdbc:mysql://localhost:3306/instock";
            String dbusername = "root";
            String dbpassword = "pswd";
            Connection con = DriverManager.getConnection(url, dbusername, dbpassword);
            ResultSet rs = null;

            PreparedStatement ps = con.prepareStatement("select * from master_materials");

        %>    

        <input type="submit" value="Save" />

        <table id="myTable" border="1">   
            <th>Material</th>
            <th>Desciption</th>
            <th>Quantity</th>

            <%for (int row = 1; row <= 5; row++) { %>
            <tr id="rowToClone">                
                <%--   <%for (int col=1; col <= 5; col++) { %>    --%>
                <%rs = ps.executeQuery();%>
                <td> 
                    <select>
                        <% while (rs.next()) {%>
                        <option><%=rs.getString(1)%></option>
                        <%}%>    
                    </select>

                </td>
                <td><input type="text" name="Description" value="" readonly="readonly" />  </td> 
                <td>adsasd </td> 
                    <%--       <% } %> --%>
            </tr>
            <% }%>
        </table>

    </body>
    <input type="button" onclick="cloneRow()" value="Clone Row" />
</html>

<script type="text/javascript">
    function cloneRow() {
        var row = document.getElementById("rowToClone"); // find row to copy
        var table = document.getElementById("myTable"); // find table to append to
        var clone = row.cloneNode(true); // copy children too
        clone.id = "newID"; // change id or other attributes/contents
        table.appendChild(clone); // add new row to end of table
    }
</script>

You have 2 options, either using AJAX or using button click(i.e using servlet) — sForSujit, Jul 13 '17 at 13:39

score 0 · Answer 1 · answered Jul 13 '17 at 13:51

At first, writing java code on jsp is not good. When you populate your select, you can choose to include value as description. You can use javascript Onchange function to catch select interaction.

<select onchange="yourFunction()">
<option value= "<%=rs.getString(2)%></"><%=rs.getString(1)%></option>

Now on yourFunction you can get the item that was selected and its description and you can set this value on second column.

JSP - Javascript, Update table fields based on select option value

1 Answers1