Post parameters in two forms when onchange happens in one of them
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>
<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&g开发者_如何学JAVAt;
<%-- 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>
<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.
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>
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.
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.
加载中,请稍侯......
精彩评论