0

I have dropdown lists in two forms in a single .jsp. I would like the change of any of the lists to trigger a post back to the .jsp itself with the currently selected parameters in both forms. But I couldn't get it work. Here is the relevant part of the code:

Both forms are in the SearchBrowse.jsp. This is form1 (form2 will have an identical structure. Note that, I tried to use the same form id and hope to achieve this effect but didn't work):

<c:set var="counter1" value="0"></c:set>
<c:set var="curSp" value="0"></c:set>

<form id="myForm" method="post" action="SearchBrowse.jsp">
    <b>Select Species:</b>&nbsp; 
    <select name="spChoice" size="1" onchange="submit()">
        <c:forEach var="sp" items="${species}">
            <c:choose>
                <c:when test="${param.spChoice == sp.name}">
                    <c:set var="spFlag" value=" selected"></c:set>
                    <c:set var="curSp" value="${counter1}"></c:set>
                </c:when>
                <c:otherwise>
                    <c:set var="spFlag" value=""></c:set>
                </c:otherwise>
            </c:choose>
            <option value="<c:out value='${sp.name}' />" <c:out value='${spFlag}' />>
                <c:out value="${sp.name}"></c:out>
            </option>
            <c:set var="counter1" value="${counter1 +1}"></c:set>
        </c:forEach>
    </select>
    <br></br>
</form>

This is form2:

<c:set var="counter2" value="0"></c:set>
<c:set var="curChrm" value="0"></c:set>

<%-- Implement a dropdown list and and determine which javabean list to be displayed in the table --%>
<form id="myForm" method="post" action="SearchBrowse.jsp">
    <b>Select Chromosome to browse summary:</b>&nbsp; 
    <select name="chrmChoice" size="1" onchange="submit()">
        <c:forEach var="chrms" items="${riceChrmLocation}">
            <c:choose>
                <c:when test="${param.chrmChoice == chrms.name}">
                    <c:set var="selectFlag" value=" selected"></c:set>
                    <c:set var="curChrm" value="${counter2}"></c:set>
                </c:when>
                <c:otherwise>
                    <c:set var="selectFlag" value=""></c:set>
                </c:otherwise>
            </c:choose>
            <option value="<c:out value='${chrms.name}' />" <c:out value='${selectFlag}' />>
                <c:out value="${chrms.name}"></c:out>
            </option>
            <c:set var="counter2" value="${counter2 +1}"></c:set>
        </c:forEach>
    </select>
    <br></br>
</form>

Currently when one form changed, the selection parameter of the other dropdown list is not posted back. I am not sure if it is the problem with scope. I tried various ways but couldn't get it right. Did I do something wrong here? Also is this code a bit messy? (If it is, do u have any better suggestion on coding it in a neat way?) Thanks a lot.

Ken
  • 3,922
  • 9
  • 39
  • 40
  • The code is truly messy :) Before I propose a rewrite, I'd like to know what those `counter` variables are doing there? They seem completely unused/useless. And as to the answer to the actual problem: indeed just put them in same form or use JS/Ajax. See my answer to a similar question here: [populate child dropdowns in JSP/Servlet](http://stackoverflow.com/questions/2263996/populating-child-dropdownlists-in-jsp-servlet) – BalusC Jul 01 '10 at 11:13
  • Hi BalusC, thanks for your response. hm... I use the counter to just get the index of the dropdown list to set the variable curChrm so that I will be able to control which >tableContent should be displayed, as u suggested: – Ken Jul 01 '10 at 12:32

3 Answers3

2

When you submit a form, only the fields from that form are sent on the request.

You can either have just one form (with all your fields) or use JavaScript before submit to copy values from one form to hidden elements in the other.

EDIT: here is a little JS example:

<!-- test.html -->
<html>
  <head>
    <script type="text/javascript">
      function doCopyAndThenSubmit() {
        var sourceInput = document.getElementById("source");
        //destination should be the hidden field, made it text to have a visual on the operation
        var destinationInput = document.getElementById("destination");
        destinationInput.value = sourceInput.value;

       //watch the address bar after the OK
       alert("Did the copy, press OK for the submit");
       document.forms["yourForm"].submit();
      }
    </script>
  </head>
  <body>
    Add some text in source and change the value in the select<br/>
    <form action="test.html" method="GET" name="yourForm">
      <select onchange="doCopyAndThenSubmit()">
        <option value="x">some value</option>
        <option value="y">some other</option>
      </select>

      <br/>Source:
      <!-- id must be unique in the entire document (don't confound with name) -->
      <input name="src" id="source" type="text" value="" />

      <br/>Destination:
      <input name="dest" id="destination" type="text" value="" />
    </form>  
  </body>
</html>

Usually you will have the name and id attributes with the same value for easy tracking (instead of referring to an input once by id and then by name); I used different values to reinforce the difference. And off course you will have the source in one form and the destination in another.

<form name="form1" ...>
  ...
  <input name="source" id="source" type="text" value="" />
</form>

<form name="form2" ...>
  ...
  <input name="destination" id="destination" type="hidden" value="" />
</form>
  • My main aim is just to keep all user's selections when post back. Is Javascript is the must? (I haven't touched javascript yet.....) – Ken Jul 01 '10 at 07:53
  • @Kenneth: HTML is static, so it can only get you so far. If you want to do things dynamically, like copying stuff from one place in your document to another, then you must use JavaScript. If you don't want to use JavaScript your will have no choice but to put all your fields in one form. Don't worry about JavaScript, it will be easy to do the copying and form submitting, it's basic usage for JavaScript. I will edit my answer to add a simple example for you. –  Jul 01 '10 at 08:29
0

Only one form can be submitted at a time, you can not have them BOTH submitted. You should unify them into one single form. And, just in case: remember that forms cannot be nested.

Palantir
  • 23,820
  • 10
  • 76
  • 86
  • In the page, there are 4 sections: 1. has a dropdown to determine parameters in section 2 and 3; 2. to submit a search keyword; 3. another dropdown to determine what to be display in section 4; 4. a table. Based on this page layout, if I combine 1&3 into a form, how can I have section 2 posting to a different servlet? Do u have a better idea how I can do it? – Ken Jul 01 '10 at 07:47
  • You will need to use javascript then. Create a function which will get the values from the third form, and put them into the first form. You can use hidden fields for that. Then, when user tries to submit first form, call your function, then submit. When he tries to submit third form, don't submit it, instead call your function and submit the first form. – Palantir Jul 01 '10 at 07:53
0

Is there a reason why you have two forms? You say that you want the data in both the form to be submitted, in such a case I would place all of the elements in the same form. It makes things simple.

If you would still want to have two forms and submit details from both, when the first form is submitted, then you need to use javascript.

Have hidden fields in the form1 corresponding to the fields in form2. Populate these hidden fields just whenever form1 is submitted:

Somewhere in form 1:

<input type="hidden" name="hdnChrmChoice" />
//do the same for all fields in form 2

onSubmit:

document.form1.hdnChrmChoice.value = document.form2.chrmChoice.value;
... //do the same for all fields in form 2
document.form1.submit();

However, I would still recommend to check once again whether it is possible to use a single form. Makes things simple.

Nivas
  • 18,126
  • 4
  • 62
  • 76
  • Thanks. The reason is just that the page content is semantically more meaningful by putting the form into two place. Anyway, I will use dpb's javascript to do it then. Thanks for your time. – Ken Jul 01 '10 at 12:47