Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2011-03-01
14
Medium Priority
?
668 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 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering 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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Suggested Courses

916 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