Urgent! How to add another text field using Servlet

Question

Hi all,
I'm using Java Servlet to create a submit page. I want to let users to submit their products and as many as they like.
What I made several chechboxs of common products on the first part of the page, so that users can simply select from these common products. If they have more to submit, they can click a "Add" button, then another textfield is supposed to appear in the same page below the "Add" button and user can type in, then if they have more, they click "Add", another textfiled should apprear under the first added textfield, so on and so on. After finishing type in all their products, they can click "submit" button to submit to the database.
I want all the inputed data stay in the same page when user add more and more, so that they can alwasy see and change before submit. I had problem to detect the "Add" button and add new textfield while keeping all the data user has already inputed. How can I do this?
Tons of thanks!
Victor

Answer 1

Hi
I normally use "hidden" tables for something like this. To accomplish the effect I use JavaScript and a stylesheet. Remember once the servlet sent the page to the browser, it can't interact with it anymore - you'll have to use client side script - which off course you can sent as part of your servlet output :-). I'm including some code that will get you on your way...
Style Sheet Code:.hide {display:none};
.show {display:block};
Java Script Code:var current = 0;
function showMore() {
  if (current < 5) {
    current++;
    switch (current) {
      case 2:
        document.getElementById("showme2").style.display = "block";
        break;
      case 3:
        document.getElementById("showme3").style.display = "block";
        break;
      case 4:
        document.getElementById("showme4").style.display = "block";
        break;
      case 5:
        document.getElementById("showme5").style.display = "block";
        break;
function showLess() {
  if (current > 1) {
    switch (current) {
      case 2:
        document.getElementById("showme2").style.display = "none";
        document.forms[0].term[1].value = "";
        break;
      case 3:
        document.getElementById("showme3").style.display = "none";
        document.forms[0].term[2].value = "";
        break;
      case 4:
        document.getElementById("showme4").style.display = "none";
        document.forms[0].term[3].value = "";
        break;
      case 5:
        document.getElementById("showme5").style.display = "none";
        document.forms[0].term[4].value = "";
        break;
    current--;
Extract from JSP page (easy to convert to normal servlet code):<!-- first row allways visible -->
<table id="showme1" cellpadding="3" cellspacing="0" class="show">
     <tr><td><input type="text" name="someitem"></td></tr>
</table>
<!-- hide the rest for now -->
<% for (int i = 2; i < 6; i++) { %>
<table id="showme<%=i%>" cellpadding="3" cellspacing="0" class="hide">
     <tr><td><input type="text" name="someitem"></td></tr>
</table>
<% } %>There are other ways to do the JavaScript, but the code above is cross-browser :-). You'll see with the switch statement in the JavaScript, that there is a limit to the rows that gets displayed - adjust as you please, just remember to also update the loop that generates the tables. Also note that each text field has the same name! The result of this is that an array of these fields are submitted, so you're recieving servlet will need to loop through the array basically take appropriate action on the fields that don't contain an empty string. Something like:String[] items = request.getParameterValues("someitem");
for (int i = 0; i < items.length; i++) {
    if (!items.trim().equals("")) {
//do something