Create html table on dropdownlist value change?

Question

I'm wondering how to auto refresh the page when dropdown list value selected and according to this when refreshed page came it must show some values from DB in table view. I know I'm asking much but just i want to know a way to do it. I'm working on a Web-Application which developing by JAVA EE platform using JSP-Servlets. I just got record from DB and list them into dropdownlist. Now I want to create a table when dropdownlist item WHEN selected(No submit button). How can i do that and how should i do that ? Should I use servlet or what else could be ? I can post my JSP page which is related with it.

STAFF HERE....

  <form action="/ProjectResultServlet" method="post">
   <select name="selectedProject">
   <c:forEach items="${projects}" var="project">
   <option value="${project.code}">${project.desc}"</option>
   </c:forEach>
   </select>
   <input type="submit" value="Order" />
  </form>

    Some Staff here

This part of my code is getting List for dropdown and shows them in it. Now When I select an item it should auto refresh and create a info table with informations from DB. I know I should create table in Java classes or servlets to get them from jsp. I can do that coding. I want to know HOW should I do that?

What exactly submit() does ? It relates with servlet or javascript ? — Pitch, Aug 21 '13 at 08:16
Javascript. It will submit your form and therefore call the _doPost()_ method of your _ProjectResultServlet_ . See this related question : [How to submit form on change of dropdown list?](http://stackoverflow.com/questions/7231157/how-to-submit-form-on-change-of-dropdown-list) . — jeroen_de_schutter, Aug 21 '13 at 08:38
I used it but when i clicked a value of dropdownlist. It goes to servlet and refresh page but now i cant see doprdown list anymore — Pitch, Aug 21 '13 at 09:52

score 0 · Answer 1 · answered Aug 21 '13 at 08:45

Here is a sample code for AJAX. so you can modify it on what ever language you were using.

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<br>
<div id="txtHint">Customer info</div>

</body>
</html>

Create html table on dropdownlist value change?

1 Answers1