Solved

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

Posted on 2011-03-01
14
657 Views
Last Modified: 2012-05-11
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
Comment
Question by:ob1_
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 3
14 Comments
 
LVL 86

Accepted Solution

by:
CEHJ earned 500 total points
ID: 35012179
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
 
LVL 92

Expert Comment

by:objects
ID: 35012180
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
 
LVL 6

Author Comment

by:ob1_
ID: 35012270
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 86

Expert Comment

by:CEHJ
ID: 35012304
It's better and clearer to show the html in your form along with the other <input> elements
0
 
LVL 92

Expert Comment

by:objects
ID: 35012341
> 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
 
LVL 6

Author Comment

by:ob1_
ID: 35017490
something like:

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

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



thanks,
ob1
0
 
LVL 86

Expert Comment

by:CEHJ
ID: 35017548
I gave you code in my first comment (which corresponds with your existing code) - did you use it?
0
 
LVL 6

Author Comment

by:ob1_
ID: 35017657
oooh ok i get it now.. i will do that and get back to you
0
 
LVL 6

Author Comment

by:ob1_
ID: 35018139
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
 
LVL 6

Author Comment

by:ob1_
ID: 35018677
when I try to set the value in the script (line 33 above) - the script breaks. any ideas?
0
 
LVL 86

Expert Comment

by:CEHJ
ID: 35019737
That's not the code i gave you ;)
0
 
LVL 92

Expert Comment

by:objects
ID: 35022340
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
 
LVL 6

Author Closing Comment

by:ob1_
ID: 35022416
thanks!
0
 
LVL 86

Expert Comment

by:CEHJ
ID: 35022450
:)
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this post we will learn how to make Android Gesture Tutorial and give different functionality whenever a user Touch or Scroll android screen.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question