• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 672
  • Last Modified:

how do i pass a java variable through an HTML form (using POST)?

I have the Java function below in an HTML page.

the HTML page is laid out as follows:

<head>
   <script>
   </script>
<head>

<body>
   <form method="POST" action="process.asp">
   </form>
</body>


in the HTML form I have several text box "inputs" - these are passed to the page, "process.asp" which then writes this info to a text file.

there is a java variable in the script called "num". this number represents the # of items in the form and I need to pass it to the "process.asp" page as well - how would i do this?


thanks,
ob1
     

function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = "<table width=\"100%\" border=\"1\" rules=\"cols\"><colgroup><col width=\"30%\"><col width=\"70%\"></colgroup><tr><td>Name:<a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\" style=\"text-decoration:none; color: blue;\">&nbsp; &nbsp;(Remove)</a></td><td><input type=\"text\" name=\"Client Name "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr><tr><td>Email:</td><td><input type=\"text\" name=\"Client Email "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr></table>";
  ni.appendChild(newdiv);
}

Open in new window

0
ob1_
Asked:
ob1_
  • 6
  • 5
  • 3
1 Solution
 
CEHJCommented:
You can use a <input id="numHolder" type="hidden"></input>
function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
// SET IT HERE
  document.getElementById("numHolder").value = num;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = "<table width=\"100%\" border=\"1\" rules=\"cols\"><colgroup><col width=\"30%\"><col width=\"70%\"></colgroup><tr><td>Name:<a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\" style=\"text-decoration:none; color: blue;\">&nbsp; &nbsp;(Remove)</a></td><td><input type=\"text\" name=\"Client Name "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr><tr><td>Email:</td><td><input type=\"text\" name=\"Client Email "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr></table>";
  ni.appendChild(newdiv);
}

Open in new window

0
 
objectsCommented:
you need to add it as a hidden variable in your form.
easiest would be to add the hidden variable directly in your html (with no value).
Then have your javascript set the value
0
 
ob1_Author Commented:
can i just type html into the javascript section or do i need to specify it somehow? if i add the hidden variable into the html form like the 2nd post suggest, how would i set the value with javascript?



thanks,
ob1

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
CEHJCommented:
It's better and clearer to show the html in your form along with the other <input> elements
0
 
objectsCommented:
> can i just type html into the javascript section or do i need to specify it somehow?

you can do either

>  if i add the hidden variable into the html form like the 2nd post suggest, how would i set the value with javascript?

something like:


form.elements["hiddenName"].value = 'Value';
0
 
ob1_Author Commented:
something like:

form.elements["hiddenName"].value = 'Value';

where whould i put this? up in the script section in the function?



thanks,
ob1
0
 
CEHJCommented:
I gave you code in my first comment (which corresponds with your existing code) - did you use it?
0
 
ob1_Author Commented:
oooh ok i get it now.. i will do that and get back to you
0
 
ob1_Author Commented:
does this look right? the variable doesn't seem to be coming through the form. please see lines 33 and 117.


thanks,
ob1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sandbox Request Form</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="inc/popupWindow.js"></script>
	<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />	
	<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui-1.8.9.custom.min.js"></script>
	<script type="text/javascript">

			$(function(){

				// Datepicker
				$('#datepicker1').datepicker({
					dateFormat: "yy-M-dd",
					inline: true
				});
				
				$('#datepicker2').datepicker({
					dateFormat: "yy-M-dd",
					inline: true
				});
				
			});
			
function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  form.elements["intRequests"].value = num+1;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = "<table width=\"100%\" border=\"1\" rules=\"cols\"><colgroup><col width=\"30%\"><col width=\"70%\"></colgroup><tr><td>Name:<a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\" style=\"text-decoration:none; color: blue;\">&nbsp; &nbsp;(Remove)</a></td><td><input type=\"text\" name=\"Client Name "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr><tr><td>Email:</td><td><input type=\"text\" name=\"Client Email "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr></table>";
  ni.appendChild(newdiv);
}
 
function removeElement(divNum) {
  var d = document.getElementById('myDiv');
  var olddiv = document.getElementById(divNum);
  d.removeChild(olddiv);
}
</script>
</head>

<body>
<div id="page-container">
	<div id="header">
		<img src="header.png" width="739" height="96" />
</div> <!-- header -->
     <div id="top-spacer">
    </div> <!-- top-spacer -->
    &nbsp;&nbsp;<i>Account Request Form</i>

<div id="content1">
    <form method="POST" name="setup"   accept-charset="utf-8" action="SendSetup_test.asp" >
		<table width="739" border="1" bgcolor="#CCCCCC">
			<tr height="30">
				<td width="40%">Is this a request to extend an existing account?</td>
				<td><input type="radio" name="Extension" value="Yes"/>Yes <input type="radio" name="Extension" value="No"/>No</td>
			</tr>
		</table>
   	<table width="739" border="1" bgcolor="#CCCCCC">
    		  <colgroup>
				<col width="30%">
				<col width="70%">
			  </colgroup>   
    
   <tr height="30">
    <td>Requestor Name:</td>
    <td width><input type="text" name="Requestor Name" style="background-color:white;border:0px solid white;height:22px;" size="79"/></td>
  </tr>
  <tr height="30">
    <td>Requestor Email:</td>
    <td><input type="text" name="Requestor Email" style="background-color:white;border:0px solid white;height:22px;" size="79"/></td>
  </tr>
  <tr height="30">
    <td>Client Company:</td>
    <td><input type="text" name="Client Company" style="background-color:white;border:0px solid white;height:22px;" size="79"/></td>
  </tr>
  <tr height="30">
    <td>Client Name:</td>
    <td><input type="text" name="Client Name" style="background-color:white;border:0px solid white;height:22px;" size="79"/></td>
  </tr>
  <tr height="30">
    <td>Client Email:</td>
    <td><input type="text" name="Client Email" style="background-color:white;border:0px solid white;height:22px;" size="79"/></td>
  </tr>
  <tr height="30">
  	<td><input name="Add User" type="button" value="Add User" onclick="addEvent()"></td><td>&nbsp;</td>
  </tr>
    <tr height="30"><td colspan="2">
<div id="myDiv"></div></td></tr>
  <tr height="30">
    <td>Account Period:</td>
    <td>
		<table height="10">
			<tr>
				<td>Begin Date</td>
				<td><input type="text" name="Begin Date" id="datepicker1" maxlength="10" size="8" style="height:22px;" />&nbsp;</td>
				<td width="30"></td>
				<td>End Date:</td>
				<td><input type="text" name="End Date" id="datepicker2" maxlength="10" size="8" style="height:22px;" />&nbsp;</td>
			</tr>
		</table>
	</td>
  </tr>
  <tr height="30"><td align="left" valign="top">Comments or Instructions:</td><td colspan="4" height="100"><textarea rows="8" name="Comments" cols="61" style="background-color:white;border:0px solid white;"></textarea></td></tr>
  <tr>
    <td>&nbsp;<input name="Submit" type="submit" value="Submit" /></td>
    <td>&nbsp;</td>
  </tr>
</table>
<input name="intRequests" type="hidden"></input>
</form>
</div>    

<tr><td><input type="hidden" value="0" id="theValue" />
<div id="myDiv"></div></td></tr>
                        
<p>&nbsp;</p>
</body>
</html>

Open in new window

0
 
ob1_Author Commented:
when I try to set the value in the script (line 33 above) - the script breaks. any ideas?
0
 
CEHJCommented:
That's not the code i gave you ;)
0
 
objectsCommented:
try this:

function addEvent() {
  var ni = document.getElementById('myDiv');
  var numi = document.getElementById('theValue');
  var num = (document.getElementById("theValue").value -1)+ 2;
  numi.value = num;
  myform = document.forms['setup'];
  myform.elements["intRequests"].value = num+1;
  var divIdName = "my"+num+"Div";
  var newdiv = document.createElement('div');
  newdiv.setAttribute("id",divIdName);
  newdiv.innerHTML = "<table width=\"100%\" border=\"1\" rules=\"cols\"><colgroup><col width=\"30%\"><col width=\"70%\"></colgroup><tr><td>Name:<a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\" style=\"text-decoration:none; color: blue;\">&nbsp; &nbsp;(Remove)</a></td><td><input type=\"text\" name=\"Client Name "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr><tr><td>Email:</td><td><input type=\"text\" name=\"Client Email "+(num+1)+"\" size=\"79\" style=\"background-color:white;border:0px solid white;\"></input></td></tr></table>";
  ni.appendChild(newdiv);
}
0
 
ob1_Author Commented:
thanks!
0
 
CEHJCommented:
:)
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 6
  • 5
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now