How to fetch data that will be stored in the select option value in the form?

Question

I want to dynamically fetch or get data from database and populate the select box. This is my code:

    <form action="addchangerequest" method="post">
        <select name="type">
            <option value="Non-Sap">Non-Sap</option>
            <option value="Sap">Sap</option>
        </select>

        <select name="assettriggered">
            ** I want to populate these option values upon making a selection to the first select box. These option will be the data coming from the database**
        </select>


    </form>

This is my method class.

    public List sortDeployed(String userID)
{
    List deployedlist = new ArrayList();

    try
    {

        PreparedStatement pstmt = conn.prepareStatement(SORT_ID);
        pstmt.setString(1, userID);
        ResultSet rs = pstmt.executeQuery();

        while(rs.next())
        {
            StoreAssetBean storeAssetBean = new StoreAssetBean();
            storeAssetBean.setDeployedID(rs.getInt("AssetDeployed_ID"));
            storeAssetBean.setName(rs.getString("Asset_Name"));
            storeAssetBean.setMmoID(rs.getString("UserDivision_ID"));
            storeAssetBean.setDepartment(rs.getString("User_Department"));
            storeAssetBean.setDepType(rs.getString("AssetDeployed_Type"));
            storeAssetBean.setDeployedDateTime(rs.getString("AssetDeployed_DateTime"));
            deployedlist.add(storeAssetBean);
        }

    }
    catch(SQLException e)
    {
        System.out.println(e);
    }
    return deployedlist;
}

I want the AssetDeployed_Type data must be imported to the select box named "assettriggered". Im using MVC Model 2 JSP Servlet. I've search about ajax, but i have no experience in implementing it. I want it to be dynamic data fetch when I select value in the first select box. Please help me guys, thank you in advance!!

possible duplicate of [How to use Servlets and Ajax?](http://stackoverflow.com/questions/4112686/how-to-use-servlets-and-ajax) — Luiggi Mendoza, Jul 08 '13 at 15:44
You're welcome. By the way, since it looks you will use POST instead of GET to execute the ajax action, you can use `$.post` instead of `$.get` and handle it by using `doPost` instead of `doGet`. You can find more info about firing the ajax call in jQuery documentation (or in your javascript library that handles ajax calls). — Luiggi Mendoza, Jul 08 '13 at 15:52
@LuiggiMendoza Since Its going to be an AJAX request the choice of method (POST/GET) is quite arbitrary as soon as the proper servlet method is hit. — skuntsel, Jul 08 '13 at 16:06
@skuntsel it is not so arbitrary but in case of a simple request like this, it could be a GET request. Just expanding the great explanation posted in BalusC's answer for another uses of ajax calls that shouldn't be sent as GET like login. — Luiggi Mendoza, Jul 08 '13 at 16:09
@LuiggiMendoza Well, agreed on the limitations of GET requests, as well as on the greatness of the referred answer by BalusC. — skuntsel, Jul 08 '13 at 16:17

score 0 · Answer 1 · answered Jul 08 '13 at 16:03

That's quite easy to do as you understand what steps you need to take.

Send an AJAX request on some JavaScript event you desire. In your case it is onchange of the first <select>. You can of course send XMLHttpRequest on your own, but that's much easier (and stable) to do by using a well-established JS library like jQuery.
The request is received by a dedicated servlet that accepts some data that will be used to fetch the necessary data in java code and send the fetched data in JSON format back to the webbrowser. The incoming data is the value of the selected <option> of the first <select> element and possibly, id of the fetch operation, if you intend to use this servlet for other purposes. Serialization of data returned from the servlet to JSON format can be done by using a library like Gson.
When servlet response successfully arrives back to the client, a JS callback function will be executed with data from servlet available therein. You would use that data to create HTML elements, populate them with application-specific data and update HTML DOM (second <select> element) with the freshly fetched data.

How to fetch data that will be stored in the select option value in the form?

1 Answers1