How to get data from DB dynamically based on textbox input using JSP?

Question

I am using JSP as my backend for my HTML and I want to get the customer name when I start entering the customer contact number.

HTML:

<html>
<body>
    <script>
        function evaluation() {
            var myBox1 = document.getElementById('milk').value;
            var result = document.getElementById('result');
            var myResult = myBox1 * 35;
            result.value = myResult;
        }
    </script>

    <form action="BillValid.jsp" method="post">
        <table width="70%" cellspacing="30" color="#FFFFFF">
            <tr>
                <th>ENTER THE DETAILS</th>
            </tr>
            <tr>
                <td><font color="#800000">Customercontact</font></td>
                <td><input name="cus_contact" type="text" id="contact"></td>
            </tr>
            <tr>
                <td><fontcolor="#800000">CustomerName</font></td>
                <td><input type="text" name="cus_name"></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td></td>
            </tr>
            <tr>
                <td><font color="#800000">DayConsumption</font></td>
                <td><input id="milk" type="text" name="days_con"
                    oninput="evaluation()"></td>
            </tr>
            <tr>
                <td><font color="#800000">SumInRs</font></td>
                <td><input id="result" name="total"</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td></td>
            </tr>
        </table>
        <input type="submit" name="Register"><input type="reset"
            name="reset">
    </form>
</body>
</html>

JSP:

 try{
    String DBuser="root";
    String DBpassword="qwerty";
    String Connection="jdbc:mysql://localhost:3306/online";

    Class.forName("com.mysql.jdbc.Driver");
    java.sql.Connection conn=DriverManager.getConnection(Connection,DBuser, DBpassword);
    out.println("Database Succesfully connected");            

    String CustomerName=request.getParameter("cus_name");
    String contact=request.getParameter("cus_contact");
    long customerCon=Long.parseLong(contact);  
    String dayCons=request.getParameter("days_con");
    int Consumtion=Integer.parseInt(dayCons);
    String total =request.getParameter("total");
    int totalConsume=Integer.parseInt(total);

    String sql = "select (CustomerName) from customer where CustomerContact='"+ customerCon+"'"; 
    java.sql.PreparedStatement st=conn.prepareStatement(sql); 
    java.sql.PreparedStatement pst=conn.prepareStatement("insert into invoice (CustomerContact ,CustomerName ,LitresConsumed ,TotalSum) values (?,?,?,?)");
    pst.setLong(1, customerCon); 
    pst.setString(2, CustomerName); 
    pst.setInt(3, Consumtion); 
    pst.setInt(4, totalConsume); 
    int i=pst.executeUpdate(); 

    if(i>0){
        response.sendRedirect("BillData.jsp");
    }else{
        response.sendRedirect("addcustomer.jsp");
    }           
}catch(Exception e){
    out.println(e);
    e.getMessage();
}

I am new to this JSP platform and also on stack overflow , It took me 45 mins to post this one question if someone could indent the code, the efforts will be highly appreciated. — karan1.singh, Sep 11 '17 at 09:00
You've to use `Ajax`. You should call a function after you entered contact number and that brings data from DB and add it in textbox. — Vinoth Krishnan, Sep 11 '17 at 09:49
I shall very thank full to you if you could send me the code of that function as I don't have any idea about AJAX. — karan1.singh, Sep 11 '17 at 12:31

Vinoth Krishnan · Answer 1 · 2017-09-11T13:14:09.213

Welcome to SO, I've got some points for you.

I shall very thank full to you if you could send me the code of that function as I don't have any idea about AJAX.

1) That's not how this site works. Please read How do I ask a good question?. We'll help you to resolve your issues, before that you go to try something from your end.

2) JSP is not the right place to code Java. Please check How to avoid Java code in JSP files?

You should keep your Java code in servlet. When ajax calls a request point it to sevlet and do Java code over there and return expected output. JSP should be used to render the output.

package com.servlet;

import java.io.IOException;
import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest request,
        HttpServletResponse response) throws ServletException, IOException {

        String customerContact = request.getParameter("myValue");
        String customerName = "Your_Response_From_DB";
        response.setContentType("text/plain");
        response.getWriter().write(customerName);
    }
}

And in your web.xml file,

<servlet>
   <servlet-name>MyServlet</servlet-name>
   <servlet-class>MyServlet</servlet-class>
</servlet>
<servlet-mapping>
   <servlet-name>MyServlet</servlet-name>
   <url-pattern>/MyServlet</url-pattern>
</servlet-mapping>

Few corrections in your HTML,

Add ID to Customer Name (Use meaningful names).

<tr>
    <td><font color="#800000">Customercontact</font></td>
    <td><input name="customer_contact" type="text" id="customer_contact"></td>
</tr>
<tr>
    <td><fontcolor="#800000">CustomerName</font></td>
    <td><input type="text" name="customer_name" id="customer_name"></td>
</tr>

If you want to return back the same page use jQuery ajax, download the jQuery plugin add it in your JSP page.

$("#customer_contact").blur(function(e){
    var contact = $(this).val();
    $.ajax({
        type : 'post',
        url : 'MyServlet',
        data: { myValue: contact},
        success : function(data) {
           console.log(data);
           $("#customer_name").val(data);
        }
    });
});

Let me know if this helps.

Cheers..!

How to get data from DB dynamically based on textbox input using JSP?

1 Answers1