Friday, April 25, 2014

HTML: Post your data into a popup window

Rather than posting the data to a new page, you might need have to post the data to a popup. Therefore, this would help you to get a rough idea on how to do that. (Things get pretty interesting when you learn new stuff everyday. :D)

Source code of the main html file - index.html
<!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>Simple Form</title>
<script language="javascript" type="text/javascript">
  function submitForm(formName){
 var popupWin = window.open("",formName,"status,height=540,width=500,resizable=yes,scrollbars=yes");
 popupWin.focus();
  }
</script>
</head>
<body>
<form action="formResults.php" method="post" name="myForm" target="popupWin" onsubmit="javascript:submitForm(this.target);">
Name:<br /><input name="name" type="text" size="50" maxlength="50" /><br />
Address:<br /><input name="address" type="text" size="50"/><br />
<input name="submit" type="submit" value="Submit the form data to a popup"/>
</form>
</body>
</html>

Here's the simple form that I would be posting the data to - formResults.php
Your name is: 
<br />
<?php
  echo $_REQUEST["name"]
?>
<br />
<br />
Your address is: 
<br />
<?php
  echo $_REQUEST["address"]
?>
* Click here for the demo shown in this post.

No comments:

Post a Comment