Solved

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

Posted on 2011-03-01
14
660 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
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free 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: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

615 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