Solved

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

Posted on 2011-03-01
14
654 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_
  • 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
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

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

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

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

770 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