Tricky form problem glad for any ideas or tell me its not possible

[Tony Evans]

I have what I consider to be a tricky form problem, I have a dynamic table that is created within a loop. for each row there is a text area and submit button that allows someone to ammend a field in that row and then submit that change.

The sticky problem is that I have been asked to create a submit all button, that will allow someone to add to more than one field and then press the submit all button so all the rows are updated.

I cannot see a way to do this, as the table is greated dynamically:

Each row is a form with its own submit button, Is there a way to create a form within a form with its own submit all button.

Thansk for any help Tony

[Pedro Penna]

You could use client-side scripting to solve that problem:

<script>
function submitAll() {
var elements = document.getElementsByTagName("textarea");
 
for (var i = 0; i < document.forms.length - 1; i++) {
var input = document.createElement("input");
input.type = "hidden";
input.value = elements[i].value;
document.forms[i].appendChild(input);
document.getElementById("allForm").submit();
}
}
</script>

<table>
<tr>
<td>
<form method="post" action="somewhere.jsp">
<textarea name="texta"></textarea> 
<input type="submit" value="OK" />
</form>
</td>
</tr>
<tr>
<td>
<form method="post" action="somewhere.jsp">
<textarea name="texta"></textarea> 
<input type="submit" value="OK" />
</form>
</td>
</tr>
<tr>
<td>
<input type="button" value="Submit All" onklick="submitAll()" />
<form id="allForm" method="post" action="all.jsp"></form>
</td>
</tr>
</table>

Note: change the event handler "onklick" to "onclick" before using this script
[ July 16, 2004: Message edited by: Pedro Penna ]

[Tony Evans]

Thanks Pedro,

I will try this tonight, I have to admit I was wracking my brains on how to do this.

Cheers and thanks again.

Tony

[Tony Evans]

Pedro, thanks for your help can I ask a further question in the java script I assume that all the data is in the document. Is it possible to read that data from the document into a java object which can then be passed to the controlling servlet as a parameter.

The problem is that all the data is passed to the servlet so that it can update the database.

Thansk again for your help

Tony
<script>
function submitAll()
{
var elements = document.getElementsByTagName("temp_limits");
for (var i = 0; i < document.forms.length - 1; i++)
{
var input = document.createElement("input");
input.type = "hidden";
input.value = elements[i].value;
document.forms[i].appendChild(input);
document.getElementById("allForm").submit();
}
}
</script>

[Paul Sturrock]

You are probably going to get a better response to JavaScript questions in the JavaScript forum. You might want to repost this there.

That being said I can tell you that a submit is done for the from which the event was fired against. If you have two forms on the page its only the for that is submitted which has its attributes included in the request. Pedro Penna's workaround makes sense - by reading the contents of the forms on the page and putting them in one form, which is really the one which is submitted. I have to ask though - if you are going to do this and all the forms share the same action, why are you using seperate forms?

Pedro, thanks for your help can I ask a further question in the java script I assume that all the data is in the document. Is it possible to read that data from the document into a java object which can then be passed to the controlling servlet as a parameter.

"document" is an object in the client side JavaScript. A form submission makes an HTTP request passing the attribues in the form with it. A Servlet is written to interpret HTTP and extract these parameters. Java only gets involved at the Servlet level.
[ July 20, 2004: Message edited by: Paul Sturrock ]

[Pedro Penna]

Let me see if I understood your question correctly: you want to pass additional data from a HTML page in Java Objects to a Servlet?

First of all, the request can only send strings (plain text) as parameters.
And if you want to send additional chunks of text to a servlet, you could use a similar solution to the example above, like creating more elements in the "submit all" form and assigning new values to them, using values retrieved from other form elements (using the document.getElementById() method, for example).

[Bear Bibeault]

Moving to the HTML/Javascript forum for any further client-side discussion.

[Eric Pascarello]

JavaScript can not talk directly to the Java, you need to submit a form to the Java to pass data.


Eric

[Tony Evans]

The problem is as follows at the moment I have the following code

while(rs.next())
{
%> <form name="setlimits" method=POST action="controlservlet">
<tr>
<td>
<input type="text" name="new_limit" size=10 value="0" >
<input type="hidden" name="index" value="<%= rs.getString("index") %>">
<td>
<tr>
<tr>
<input type="submit" value="Amend Limit">
</form>
<tr>
<%
}

When I press submit the control servlet is called and two parameters passed to it new_limit and a corresponding index.
This allows me to update a table row with the new_limit in the database where index = index.

What I have now been asked to do is supply a submit all button, when this button is pressed I should pass to the control servlet all the new limits with all the corresponding indexs.

I have no real experience of java script, and have no real idea of how this java script function works, and how my servlet will pick up the data.

Thanks for any help Tony

<script>
function submitAll()
{
var elements = document.getElementsByTagName("new_limit");
for (var i = 0; i < document.forms.length - 1; i++)
{
var input = document.createElement("input");
input.type = "hidden";
alert(elements[i].value);
input.value = elements[i].value;
document.forms[i].appendChild(input);
document.getElementById("allForm").submit();
}
}
</script>

[Pedro Penna]

Tony,

I modified the code and included the

input.name = "new_limit" + i;

command. This command will make the input element's name unique, making it easier for you to extract the submitted information in your servlet. But if you choose to keep the same name in every element you can use the getParameterValues method from the HttpServletRequest object (its return value is an array of Strings).

  for (var i = 0; i < document.forms.length - 1; i++) {
    var input = document.createElement("input");
    input.type = "hidden";
    input.name = "new_limit" + i;
    input.value = newLimitElements[i].value;
    document.forms[i].appendChild(input);
 
    input = document.createElement("input");
    input.type = "hidden";
    input.name = "index" + i;
    input.value = indexElements[i].value;
    document.forms[i].appendChild(input);
  }
 
  document.getElementById("allForm").submit();

PS: After reviewing the code provided in my first reply, I noticed there was an error: the submit command should have been placed outside the loop.

PS.2: You won't be able to use getElementsByTagName("new_limit"), because "new_limit" is not a valid HTML tag. You should try retrieving the values using document.getElementById("elem_id").
[ July 21, 2004: Message edited by: Pedro Penna ]

[Tony Evans]

thanks Pedro, LOL I still have one problem

here is my javascript code

<script language="javascript">
function submitAll()
{
var newLimitElements = document.getElementsByTagName("newlimit");
var indexElements = document.getElementsByTagName("borgnum");

for (var i = 0; i < document.forms.length - 1; i++)
{
var input = document.createElement("input");
input.type = "hidden";
input.name = "new_limit" + i;
input.value = newLimitElements[i].value;
alert(input.name);
alert(input.value);
document.forms[i].appendChild(input);

input = document.createElement("input");
input.type = "hidden";
input.name = "index" + i;
input.value = indexElements[i].value;
document.forms[i].appendChild(input);
}
document.getElementById("allForm").submit();
}
</script>

here is the form
<form name="limits" method=POST action="global">
<input type="hidden" name="cmd" value="temp_limits">
<newlimit><input type="text" name="new_limit" size=10 value="0"><newlimit>
<input type="hidden" name="subcmd" value="amendlimit">
<borgnum><input type="hidden" name="borg_num" value="<%= rs.getString("borg_num") %>"></borgnum>
<input type="submit" value="Amend Limit">
</form>

The problem is that alert(input.value); returns undefined

I think that this part of the code is not working:
<newlimit><input type="text" name="new_limit" size=10 value="0"></newlimit>

The number I am inputting is not bering picked up

Thanks for your help

Tony

[Pedro Penna]

The "value" property belongs to the <input> element. You may wanna try something like this:

  <span id="newlimit"><input type="hidden" value="4"></span>

and retrieve the input reference using the firstChild property, like

  var spanRef = document.getElementById("newlimit");
  var inputRef = spanRef.firstchild;
  alert("Four equals " + inputRef.value);

[Tony Evans]

Hi Pedro

Java script is tricky, wish it was a pure java solution, I have tried your new solution:

In the form I have the following:

<span id="newlimit"><input type="text" name="new_limit" size=10></span>
<input type="hidden" name="subcmd" value="amendlimit">

<span id="borgnum"><input type="hidden" name="borg_num"
value="<%= rs.getString("borg_num") %>"></span>

In the javascript function I have :

<script language="javascript">
function submitAll()
{
var spanRef = document.getElementById("borgnum");
for (var i = 0; i < document.forms.length - 1; i++)
{
var inputRef = spanRef.firstchild;
alert("Four equals " + inputRef.value);
}
}


</script>






Am getting a runtime error:

Value is null not an object for both alerts

[Tony Evans]

Hi Pedro

Java script is tricky, wish it was a pure java solution, I have tried your new solution:

In the form I have the following:

<span id="newlimit"><input type="text" name="new_limit" size=10></span>
<input type="hidden" name="subcmd" value="amendlimit">

<span id="borgnum"><input type="hidden" name="borg_num"
value="<%= rs.getString("borg_num") %>"></span>

In the javascript function I have :

<script language="javascript">
function submitAll()
{
var spanRef = document.getElementById("borgnum");
for (var i = 0; i < document.forms.length - 1; i++)
{
var inputRef = spanRef.firstchild;
alert("Four equals " + inputRef.value);
}
}
</script>

I notice that I have more elements than in your examples, but even when I tried your example for borgnum :

<span id="borgnum"><input type="hidden" value="<%= rs.getString("borg_num") %>"></span>

I still got the same runtime error.

Thanks for your help

Tony







Am getting a runtime error:

Value is null not an object for both alerts