1

I am making a web application in java using netbeans and mysql. There are two tables in database "Categroy" and "SubCat". and there are entity classes and session beans to extract data from database. There are two drop down lists in a jsp form. I want that when a category is selected in 1st drop down list, its category id is gone in servlet and from there, a list of only releated subcategories are shown in the 2nd drop down list. How I can get that?

My JSP code is as under

    <form action="<c:url value='submit_site'/>" method="POST">
    <table border="0">
        <tbody>
               <tr>
                <td><label for="cat">Category</label></td>
                <td> 
                    <select name="category">

                        <c:forEach var="cat" items="${categories}">
                            <option name="catId" value="${category.id}">${cat.id}. ${cat.catName}</option>
                        </c:forEach>
                    </select> 
                </td>
            </tr>   
            <tr>
                <td><label for="SuCat">SubCategory</label></td>
                <td>
                    <select name="subcat">
                        <option>Select...</option>
                        <c:forEach var="subcat" items="${subCategories}">
                            <option name="subId" value="${subcat.subId}">${subcat.subCatName}</option>
                        </c:forEach>
                    </select>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" 
                           value="Submit"/>
                </td>
                <td colspan="2">
                    <input type="reset" 
                           value="Reset" />
                </td>

            </tr>
        </tbody>
    </table>

</form>

All categories from database are displayed in first drop down list but from the first drop down list the id of selected category is not getting into the servlet and subcategories are not shown in 2nd drop down. How can i get related subcategories in 2nd drop down? please guide me i am stucking in this from two weeks.

I have searched on web but can't solve my confusion. There are javascripts for drop down list but i can't understand these scripts. Can i do that without using javascript cod?

Asma Ihsan
  • 131
  • 1
  • 3
  • 10
  • Where's your submit? Can you post more of your html? – Will Jan 14 '13 at 13:31
  • I have added the complete code of jsp form. Now please help in fixing the problem – Asma Ihsan Jan 14 '13 at 14:05
  • Updated my answer. Is it clear? Do you know how to use client-side javascript? – Will Jan 14 '13 at 15:59
  • no, i don't know how to use javascript – Asma Ihsan Jan 14 '13 at 19:20
  • Javascript is a block of code sent by your server to the client browser and, thus, it is executed in the browser, and not in your server. Every major browser can execute javascript. It can be used for animations, validations and sending data to the server asynchronously. It is a dynamic language whose syntax looks like java. You can manipulate elements on the screen on code on a event-oriented fashion – Will Jan 15 '13 at 12:25
  • Through javascript you can obtain a the value the user selected in the first combobox. Then, using AJAX (which is a javascript functionality) you submit it to the server. The server will obtain that value, search the database for the correct subcategories, and return to the javascript, which will fill the second combo box with the correct values – Will Jan 15 '13 at 12:26

1 Answers1

1

Well, i think you won't be able to run away from javascript :-). You could make a full submit using a button. loading the second combo and the user selects the second combo. That will be a pretty weird user experience :-).

Your problem can be solved in two ways:

  • A javascript full-page submit
  • An AJAX call

An AJAX call is preferable and more user-friendly. A full submit is easier to implement, but the page will flash and reload the content.

A full submit can be done using a submit in selecting the option in the combobox (if you have only one form in the document):

<select name="subcat" onchange="document.forms[0].submit()">
  <option>Select...</option>
  <c:forEach var="subcat" items="${subCategories}">
    <option name="subId" value="${subcat.subId}">${subcat.subCatName}</option>
  </c:forEach>
</select>

For an AJAX call, you can implement it yourself using a XmlHttpObject, but that's reinventing the wheel; stick to a JS framework like jquery.

Update: sorry, i posted the link in the wrong order. This is an example of using a jquery with servlet. Basically you'd be cool serializing the whole list of subcategories using JSON (or HTML, as in this link) and then reloading the combobox using javascript

Community
  • 1
  • 1
Will
  • 14,348
  • 1
  • 42
  • 44
  • i have no any idea about ajax and javascript even i don't know these terms JSON, AJAX etc. Please guide me considereing me totally blank – Asma Ihsan Jan 14 '13 at 19:25
  • I have found the folllowing link that is related to my question. [link](http://stackoverflow.com/questions/2896730/how-to-generate-dynamic-drop-down-lists-using-jquery-and-jsp) – Asma Ihsan Jan 15 '13 at 11:17
  • yes, that's correct! that's a perfect example of loading two combo boxes :-) – Will Jan 15 '13 at 11:31
  • I have found the folllowing link that is related to my question. link I have tried it but have problem when i insert the following code:'Map options = optionDAO.find(selectedValue); String json = new Gson().toJson(options);' in my servlet "the symbols are not found "is displaying. Please tell me how i resolve this problem? @WillP – Asma Ihsan Jan 15 '13 at 12:13
  • You can't just copy and paste the code. It is probably missing the `optionDAO` object, because it doesn't exist in your project. It is a class written by the guy in that link you sent. You need to adapt that example: use your own database search object – Will Jan 15 '13 at 12:23
  • Thanks alot for your help. I'll try to do it again and in case of any query i'll come back to you again. – Asma Ihsan Jan 16 '13 at 07:19