5 Replies - 3092 Views - Last Post: 06 November 2011 - 08:27 PM

#1 JJackel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-November 11

passing form data into a new window

Posted 06 November 2011 - 06:24 PM

IM helping a family member with a project and we are trying to make a page where they type in a number and when they click submit it the page opens in the same window with the results and an alert popup with the solution. I do not know how to take the form information into a page within the same window and make the alert and page display the solution. please help, here is what I have for the first page, I just need to know what to add to create the second page with all that.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.1 Transitional//EN">
<HTML><HEAD>
</HEAD>
<BODY BGCOLOR=FFFFFF TEXT=000000 LINK=0000FF VLINK=800080>


<TABLE align="center" width="950" BORDER=0 CELLPADDING=5>
<TR BGCOLOR=#FFFFFF><TD WIDTH=80%>
<TABLE align="center" width="950" BORDER=0 CELLPADDING=5>
<TR BGCOLOR=#FFFFFF>
 <TD WIDTH=80%>
<H1 align="center">

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Celsius and Fahrenheit Conversion</H1>
<H1 align="justify">Click whichever degree you wish to convert from and type the
temperature desired.<br> <br>
 After temperature is entered click calculate to see desired results
in celsius.
 <TR BGCOLOR=#FFFFFF valign="top">
   <td>
   <!-- start convert routine --><br />

<TABLE align="center" BORDER=5 CELLPADDING=5>
<TR BGCOLOR=#FFFFFF valign="top"><td>
<!-- start convert routine -->

<form name="Converter">
<center>
 <h2>Fahrenheit to Celsius </h2></center>
<div align="center"></FORM>
<form name="Converter2" target="_self" action="--WEBBOT-SELF--" method="POST">
 <!--webbot bot="SaveResults" S-Builtin-Fields S-Form-Fields U-File="file:///C:/Users/James/Documents/My Web Sites/_private/form_results.csv" S-Format="TEXT/CSV" -->
 <p>
 <center>
   <input name="C" type="hidden" onfocus="clear_field(this)"
onchange="F.value = (212-32)/100 * this.value + 32 " value="0";>
   &deg;F&nbsp;<input type="text" name="F" value="32"
onfocus="clear_field(this)"; onchange="C.value = 100/(212-32) *
(this.value - 32 )"

 <BR>
 <input type="button" name="convert" value="Calculate"
onclick="alert(C.value)" >
 <INPUT TYPE="reset" N
 AME="reset" VALUE="Reset"><br>
</center></FORM>
<br />
</BODY></HTML>


Is This A Good Question/Topic? 0
  • +

Replies To: passing form data into a new window

#2 Mr.Bright  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 05-November 11

Re: passing form data into a new window

Posted 06 November 2011 - 07:18 PM

I do not know how to take the form information into a page within the same window and make the alert and page display the solution.

Do u want to calculate and display in the same page without page refresh?
Was This Post Helpful? 0
  • +
  • -

#3 JJackel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-November 11

Re: passing form data into a new window

Posted 06 November 2011 - 07:29 PM

Well if its possible even a new window all together would be fine. I have been picking at this for days and cant seem to write anything to work, I just need it to take the info do the calculation and come onto the page as text and have a popup with the solution as well
Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3636
  • View blog
  • Posts: 5,759
  • Joined: 08-June 10

Re: passing form data into a new window

Posted 06 November 2011 - 07:46 PM

That HTML is kind of terrifying. Nested tables for layout, styling tags/attributes all over the place, long strings of &nbsp; entities, missing end tags, and messed up indentation. It's really no good if you want this to work properly.

I suggest you familiarize yourself with CSS. It's the other half of the core web-development tools required to create good web pages. Right now you're only using one half of it, and your code is suffering for it.

For example, if you re-wrote your HTML to look like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>Example</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	</head>
	<body>
		<div id="container">
			<h1>Celsius and Fahrenheit Conversion</h1>
			<p class="description">
				Click whichever degree you wish to convert from and type the temperature desired.
			</p>
			<p class="description">
				After temperature is entered click calculate to see desired results in celsius. 
			</p>
			<form id="frm_convert" name="convert">
				<h2>Fahrenheit to Celsius</h2>
				<div>
					<span>F</span>
					<input type="text" name="degress" id="inp_degrees" value="32"/>
					<input type="submit" id="btn_calculate" value="Calculate"/>
					<input type="reset" id="btn_reset" value="Reset"/>
				</div>
			</form>
		</div>
	</body>
</html>


You could achieve the same look your current code uses by applying a handful of simple CSS rules:
#container {
	width: 950px;
	margin: 0 auto;
	font-size: 100%;
	font-family: serif;
}
h1, h2 {
	font-size: 200%;
	text-align: center;
}
h2 {
	font-size: 150%;
}
p.description {
	font-size: 200%;
	font-weight: bold;
	text-align: justify;
}
form {
	border: outset 5px #000;
	width: 325px;
	height: 130px;
	padding: 5px;
	margin: 0 auto;
}


Far cleaner, don't you agree?

You could put that CSS into a separate file and apply it to the HTML by putting a line like this in the <head> section:
<link rel="stylesheet" type="text/css" href="theFile.css">




As to your question. To show the user the calculated value when the button is hit, I suggest you capture the "submit" event of the form using Javascript, and then go from there.

These days it's generally not considered good to put to much Javascript (or CSS, for that matter) into the HTML file itself, but rather put it in separate files. Then you include them by adding <script> (for Javascript) or <link> (for CSS) tags in the <head> of the HTML.

So with that in mind, a simple way to start the Javascript application is to capture the "load" event of the window and use it to execute the code. That can be done like this:
window.onload = function () {
	// Insert code to execute when the page loads.
}


Inside this function you'd want to fetch the form element so we can capture it's "submit" event.
// Get a reference to the form element.
var form = document.getElementById("frm_convert");

// Captuer the "submit" event of the form, using the
// "onsubmit" property of the form element.
form.onsubmit = function() {
	// Insert code to execute when the form is submited.
	
	// Return "false" to prevent the form from actually
	// submitting to another page.
	return false;
}


Now all you have to do is get the <input> with the degrees value, calculate the Celsius value and show it to the user.
// Get a reference to the degree input element
var inp_degrees = document.getElementById("inp_degrees");

// Read the value and make sure it's a valid number.
var farenheit = parseInt(inp_degrees.value);
if (isNaN(farenheit)) {
	alert("That's not a valid number!");
}
else {
	// Show the user the Celsius value for it.
	var celcius = (212-32)/100 * farenheit + 32;
	alert(farenheit + "F = " + celcius + "C");
}


If you want to show the value on the page as well, you just have to create an element and give it an ID, like: <div id="output"></div>, and fetch it in your code like I did with the other elements. Then you can set it's value using the innerHTML property.
var output = document.getElementById("output");
output.innerHTML = farenheit + "F = " + celcius + "C";


Was This Post Helpful? 1
  • +
  • -

#5 JJackel  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 06-November 11

Re: passing form data into a new window

Posted 06 November 2011 - 07:57 PM

super helpful, I really appreciate it. Im going to try and type it up with the help you gave me. The code I posted was really a rough draft I hadnt organized it since it was just thrown together quickly but thanks for the assistance
Was This Post Helpful? 0
  • +
  • -

#6 Mr.Bright  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 05-November 11

Re: passing form data into a new window

Posted 06 November 2011 - 08:27 PM

I thought u need the function like this
form1.html
<form name="Converter2"   action="" method="">

 <center>
   <input name="C" type="hidden" onfocus="clear_field(this)"
onchange="F.value = (212-32)/100 * this.value + 32 " value="0";>
   &deg;F&nbsp;<input type="text" name="F" value="32"
onfocus="clear_field(this)"; onchange="C.value = 100/(212-32) *
(this.value - 32 )">

 <input type="button" name="convert" value="Calculate" onclick="opennew()" >
</FORM>
<script>
function   opennew()
{

	window.open( "form2.html");
} 
</script>


click the Calculate button then the form data pass to the form2 page :whistling:

form2.html
 <BODY>
  <script>
window.onload=function (){
	var   url=window.opener.location.href;
	var   aa=window.opener.Converter2.F.value; 
	alert(url+'   '+aa);
  }
  </script>
 
 </BODY>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1