Warm tip: This article is reproduced from serverfault.com, please click

How to fetch multiple values and display in textbox from database on selection of <option> in jsp

发布于 2020-12-02 13:27:53
  1. My table is: Users and it consist These columns. i). loginid ii). Name iii). FirstName iv). LastName v). Address

in the below we are populating names in the dropdown, once dropdown value changes, we need to print the correponding firstname,lastname,address,loginid in the textbox. this what we need to achieve

This is my jsp code.

        <%   DBConnection dbc=new DBConnection();   
             Connection con=dbc.getNewConnection();
             Statement st = null;
             ResultSet rs = null;
        try
        {
           st=con.createStatement() ;
           rs=st.executeQuery("select * from Users"); 
           %>
 
   <select id="selectBox" >

         <%  while(rs.next()){ %>
                <option><%= rs.getString(2)%></option>


      <%} %>
    </select>
    <input id="loginid" type="text" value="" />
    <input id="firstname" type="text" value="" />
    <input id="lastname" type="text" value="" />
    <input id="address" type="text" value="" />

So how to populate above 4 values based on selected name from the Users table.
Please help me how to write Javascript function to do that.

Questioner
CHILUKA BHARATH
Viewed
0
Swati 2020-12-03 12:18:31

You first need to write onchange event handler so whenever select-box value gets changes this handler will get called and then send the value of select to backend page(servlet) .So, ajax code will look like below :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  $('select#selectBox').on('change', function() {
     var value = $(this).val(); //get value from select-box
      $.ajax({
        type: 'POST',//can be post request or get 
        url: url,//put url here where you need to send
        data: {
          'value': value//pass value 
        },
        success: function(response) {
          //result will come here 
           //if recieve as html use           
          $("somedivclass").html(response)        
          //if recieve as separted commas         
          var result = response.split(",")
          //access same using result[0],result[1] ..etc
          //add value to input using
          $("#loginid").val(result[0]);
         //same for other  
    
        }
      });
    })

At your server end get that value which is passed from ajax using request.getParameter("value") inside doPost method of ajax if making POST request.Then ,simply write your query to retrieve record from db and send back same to ajax .So , your code will look like somewhat below :

String value = (String) request.getParameter("value");
String query = "select * from Users where yourcolumnanemtocompare=?";
PreparedStatement ps = con.prepareStatement(query);
ps.setString(1, value);
ResultSet rs = ps.executeQuery();
//if value there 
String text;
if (rs.next()) {
  //change value accordingly..i.e : rs.getstring..
  text = "<input id=" + loginid " type="
  text " value=" + rs.getInt(1) + " /><input id="
  firstname " type="
  text " value=" + rs.getInt(2) + " /> <input id="
  lastname " type="
  text " value=" + rs.getInt(3) + " /><input id="
  address " type="
  text " value=" + rs.getInt(4) + " />";
}

response.setContentType("text/html"); // Set content type 
response.setCharacterEncoding("UTF-8");
response.getWriter().write(text); // response to send back.
//or
if (rs.next()) {
  //change value accordingly..i.e : rs.getstring..
  text = rs.getInt(1) + "," + rs.getInt(2) + "," + rs.getInt(3) + "," + rs.getInt(4);
}
response.setContentType("text/plain"); // Set content type 
response.setCharacterEncoding("UTF-8");
response.getWriter().write(text); // response  to send back..
//or use json to send data..