Displaying data from combobox on the web page

Ads
 

Displaying data from combobox on the web page

Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from the database is to be extracted and shown on the same page. Kindly provide me with the code to do the following task.

View Answers

November 25, 2013 at 11:02 AM

Hi Use the jquery ajax() to achiever this requirement.

Technologies: jsp,spring and jquery.

1) develop the jsp like: palce the jquery-1.10.2.min.js inside webcontent

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<script type="text/javascript" language="javascript" src="jquery-1.10.2.min.js"></script>
<!-- <script type="text/javascript" src="json2.js"></script> -->

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Spring Jquery Ajax Demo</title>
<style>
 Table.GridOne {
    padding: 3px;
    margin: 0;
    background: lightyellow;
    border-collapse: collapse;  
    width:35%;
}
Table.GridOne Td {  
    padding:2px;
    //border: 1px solid #ff9900;
    border-collapse: collapse;
} 
</style>
<script type="text/javascript">
function madeAjaxCall(){

    $.ajax({
        type: "post",
        url: "./employee/add.htm",
        cache: false,               
        data:"firstName=" + $("#firstName").val() + "&lastName=" + $("#lastName").val() + "&email=" + $("#email").val(),
        success: function(response){

            $("#fNames").empty();

            for(var i=0;response.length;i++) {
                //var res=response[i].firstName+" "+response[i].lastName+" "+response[i].email;
                //$("p").append(res);

                var res="<option value='"+response[i].firstName+"'>"+response[i].firstName+"</option>";


                $("#fNames").append(res);

            } 

            //for(var i=0;response.length;i++) {
            //  var res=response[i];
            //  $("p").append(res);
            //}


        },
        error: function(){                      
            alert('Error while request..');
        }
    });
}
</script>
</head>
<body>
    <form name="employeeForm" method="post">    
        <table cellpadding="0" cellspacing="0" border="1" class="GridOne">
            <tr>
                <td>First Name</td>
                <td><input type="text" name="firstName" id="firstName" value=""></td>
            </tr>
            <tr>
                <td>Last Name</td>
                <td><input type="text" name="lastName" id="lastName" value=""></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="text" name="email" id="email" value=""></td>
            </tr>
            <tr>
                <td colspan="2" align="center"><input type="button" value="Ajax Submit" onclick="madeAjaxCall();"></td>
            </tr>
            <tr>
            <td>FirstNames:</td>
             <td> <select id="fNames" name="fNames" >
                  </select>
              </td>
            </tr>
        </table>
    </form>
     <h1>Spring Framework Jquery Ajax Demo</h1>

    <p></p>
</body>
</html>

2) develop the controlelr by using spring.

    import java.util.List;

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

    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.bind.annotation.ResponseBody;

    import com.technicalkeeda.bean.Employee;




    @Controller
    @RequestMapping("/employee/add.htm")
    public class EmployeeController {
        @RequestMapping(method = RequestMethod.POST)
        public @ResponseBody
        List<Employee> add(HttpServletRequest request, HttpServletResponse response)
                throws Exception {
            List<Employee> list=new ArrayList<Employee>();
            Employee employee = new Employee();

            String firstName = request.getParameter("firstName");
            String lastName = request.getParameter("lastName");
            String email = request.getParameter("email");

            employee.setEmail(email);
            employee.setFirstName(firstName);
            employee.setLastName(lastName);
            list.add(employee);

            System.out.println("fristname="+firstName);
            Employee employee1 = new Employee();


            employee1.setEmail("[email protected]");
            employee1.setFirstName("Sarala");
            employee1.setLastName("A");
            list.add(employee1);


            /*List<String> list=new ArrayList<String>();
            list.add("Basha");
            list.add("Sarala");
            */

            System.out.println("EmployeeController add methos was called="+list);
            //return employee;
            return list;
        }
    }

3) develop the Employee bean class

package com.technicalkeeda.bean;

public class Employee {

    private String firstName;

    private String lastName;

    private String email;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    @Override
    public String toString() {
        return firstName+" "+lastName+" "+email;
    }
}

4) configure this controller inside spring configuration file.

Ads









Related Tutorials/Questions & Answers:
Displaying data from combobox on the web page
Displaying data from combobox on the web page  Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from
Displaying data from combobox on the web page
Displaying data from combobox on the web page  Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from
Advertisements
Displaying data from combobox on the web page
Displaying data from combobox on the web page  Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from
Displaying data from combobox on the web page
Displaying data from combobox on the web page  Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from
Displaying data from combobox on the web page
Displaying data from combobox on the web page  Sir, I have to make a project in which a data from the database is to be displayed in combo box and depending on the choice made in combo box the data pertaining to it from
displaying data retrieved from a database in a jsp page
displaying data retrieved from a database in a jsp page  the page should display username, emailid, telephone in addition to tthe tagline however... sql = "select billid, customerid, billdate, status from customerbills where
web page altering while displaying servlet response
web page altering while displaying servlet response  in my...(request, response); i have used this code but it is not displaying the page... for this im using <%=request.getAttribute("data")%> this code and in servlet
displaying data from ms excel in form.
displaying data from ms excel in form.  Hi all, I have a requirement as mentioned below: Requirement: I have stored some data in the ms excel... (for example). I need to display these data in a form. along with the actual picture
jsp programe for displaying data from database
jsp programe for displaying data from database  i am using JSP.i want..."')"); ResultSet rs = stmt.executeQuery( "SELECT * FROM data"); String id.../WebSevices/19592-retriving-data-from-sql-server-using-jsp-code-and-placing-them
jsp programe for displaying data from database
jsp programe for displaying data from database  i am using JSP.i want..."')"); ResultSet rs = stmt.executeQuery( "SELECT * FROM data"); String id.../WebSevices/19592-retriving-data-from-sql-server-using-jsp-code-and-placing-them
jsp programe for displaying data from database
jsp programe for displaying data from database  i am using JSP.i want..."')"); ResultSet rs = stmt.executeQuery( "SELECT * FROM data"); String id.../WebSevices/19592-retriving-data-from-sql-server-using-jsp-code-and-placing-them
How to insert data from a combobox and textbox values into DB using JSP?
How to insert data from a combobox and textbox values into DB using JSP?  hi, How to insert a comb-box and a text box values in to DB using JSP? @DB:student; @table:stu_info; Combobox values:(class1,class2,class3); textbox1
displaying data
displaying data   how to display data from database on jsp using struts2
Function data from web in MS excel
Function data from web in MS excel  Hello, I would like to import data from one webpage to Excel using function Data - From Web. The problem is that this web page has at the end .jsp . When I open it via Excel, click to data
Displaying file from database
Displaying file from database  I have list of files in my database. I... strQuery = "select file_data from file where id="+id; ResultSet rs... that corresponding file from database. I have list of file id related to search. I want
displaying data for a single column from Mysql database in the list box in php form
displaying data for a single column from Mysql database in the list box in php form  I have a form in php.want to display data from a single column...; $data = @mysql_query("select * from names"); echo "Select a Name: n"; echo "<
Data displaying with limited records in jsp
Data displaying with limited records in jsp  How to display table with limited 10 records , after clicking next button another 10 records from database upto last record please help me
Passing values in ComboBox from XML file
the data from the XML file and insert it into the ComboBox. To make a program over...Passing values in ComboBox from XML file In this tutorial we are going to know how we can pass a values in ComboBox by using XML.  This example
Combobox jsp from 0 to 10
Combobox jsp from 0 to 10  Hi guys please help me to write a very easy program using jsp to display value in combobox from 0 to 10. How to write the for loop? Please help.Thank!!!   <html> <select> <
how to remove the column from a java web page
how to remove the column from a java web page  i have a web page with account#, qtr, year if i want to remove the year column which is a drop down list from my jsp what should i do and what is the process please give a brief view
displaying output on web page immediately whent the jsp buffer size is full. And how to set jsp buffer size in bytes
displaying output on web page immediately whent the jsp buffer size is full. And how to set jsp buffer size in bytes  Here is my requirement, I... jsp buffer size in byte instead of kb. I have tried like this, <%@ page
to bring checked data from one page to another
to bring checked data from one page to another  thanks for your help... fetching data from the database on second jsp page with checkbox corresponding each... on save button then the two rows data should print on first jsp page without making
How to read and display data from a .properties file from a jsp page
How to read and display data from a .properties file from a jsp page ... the data from this .properties file and display it in table format. Ex:by using... = DEDCHGG_PWDP and goes on... I have to create a jsp page to show these data
retrive data from data base and print it in every page until logout
retrive data from data base and print it in every page until logout  ... after completion of login he goto home page.inside home page i want to print the USER NAME through retriving from database.suppose from home page he go to next
display data from a table in Access Database in a HTML page
display data from a table in Access Database in a HTML page  how to display data from a table in Access Database in a HTML page in a Java Program
create login page using data from text file
create login page using data from text file  I want to create login page using data store in textfile(data submit from regiter page to textfile) using jsp and servlet. Thanks
SEARCHING THE DATA FROM DATABASE AND DISPLAY THE SEARCHED DATA IN HTML PAGE
SEARCHING THE DATA FROM DATABASE AND DISPLAY THE SEARCHED DATA IN HTML PAGE  pls help me....in this i want to search books from the database... the user specified $data = mysql_query("SELECT * FROM book WHERE upper($field
retrieve Dept Name from table dept and retrieve list of employee from emp table for that dept in combobox
retrieve data from database from table1 and display it in another textbox and from the same input paramter then its should retrieve the data from another table and display that list in combobox. For example, In HTML page, we have Dept ID
How to Get The Data from Excel sheet into out jsp page???
How to Get The Data from Excel sheet into out jsp page???  How to Get The Data from excel sheet to out jsp page in webApp
design chart takes data from database and through jsp page
design chart takes data from database and through jsp page  how can I design chart takes data from database and through in jsp page
How we delete a data of database from front end jsp page
How we delete a data of database from front end jsp page   I make a website and featch a data from data base and now i want that a delete button put... deleted from jsp page as well as from database.I used mysql and jsp. Please help me

Ads