Member Avatar for rbadtke

Hi all I made a email form in html coding. I want to add a feature And cant figure out how it do it.

I want a field that when the click onit it will make a popup window for the imput of the field.

Example

Address ______________

when they click on the _____________
it will pop up a window with

Address________________
City/state______________
Zip ______________

Please help

I know I new and this is very beginner but please help

Thanks
Ralph badtke

  • 2 Contributors
  • 1 Reply
  • 64 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by essential
Member Avatar for essential

It can be done using another window, but this more reliable than a pop-up!
All codes is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Page Template</title>
<meta name="author" content="DANI-USER : essential" />
<style type="text/css">
/* <![CDATA[ */
html, body {
  background-color : #f0f0f0;
  border : none;
  color : #696969;
  font : normal normal normal 90%/1.6 Verdana, Tahoma, Helvetica, Arial, sans-serif;
  height : auto;
  min-height : 600px;
  min-width : 800px;
  text-align : center;
  vertical-align : baseline;
  width : auto; }

h2 {
  background-color : #ccc;
  border-bottom : 1px solid #708090;
  border-top : 1px solid #708090;
  font : 700 160% "Bernard MT Condensed";
  line-height : 2ex;
  margin-top : 0;
  min-height : 2ex;
  padding : .100em 0em .100em 1em;
  white-space : nowrap; }

div {
  border : none;
  margin : 0%;
  padding : 0%; }

div#field {
  position : relative; }

div#dialogBox {
  background-color : #fff;
  border : 1px solid #ddd;
  position : absolute;
  padding : 1em;
  top : 20%;
}

div#main {
  margin : 0% auto;
  text-align : left;
  height : 100%;
  overflow : hidden;
  width : 98%;
   }

label, input { display : block; margin-bottom : .200em; }

div.tube {
  border : 1px solid #ccc;
  height : 600px;
  margin : 1% auto 1% auto;
  padding : 1.200em; }

.hide { display : none; }
.show { display : block; }

/* ]]> */
</style>
<script type="text/javascript">
// <![CDATA[

/* PRELOAD Script, and not included to the DEMO */
var animate, time;
var text;
var counter;
   counter = 0;
   Object.prototype.animate = function( DELAY ) {
   if ( typeof DELAY === "number" ) {
   return setInterval( this, DELAY );
   } return false;
};
   text = function() {
   H2 = (( document.getElementById ) ? document.getElementById("txt") : document.all.txt ); 
   inText = "JavaScript Live DEMO";
   if ( counter === inText.length ) { 
   H2.innerHTML = ""; 
   counter = 0; 
   } else {
   H2.innerHTML += inText[ counter++ ];
   }
};
// PRELOAD Script ENDED

addFIELD = function() {
   addFields = [ "City", "State" ];
   button = document.createElement("input");
   button.type = "button";
   button.value = "Update My Field!";

   div = (( document.getElementById ) ? document.getElementById("dialogBox") : document.all.dialogBox ); // This is our custom dialog box 
   div.innerHTML = "";
   fields = (( document.getElementById ) ? document.getElementById("field") : document.all.field ); // Div that hold's the Address field.

   aDDr = (( document.getElementById ) ? document.getElementById("address") : document.all.address ); // The address field.

   if ( Boolean( window.getComputedStyle ) ) {
   dTop = ( parseInt( document.defaultView.getComputedStyle( fields, null ).getPropertyValue("top")));
   div.className =  (( div.className === "hide" ) ? "show" : "hide" );  
   div.style.top = (( dTop ) + "px" ); 
   (( div.outerHTML ) ? div.innerHTML = fields.outerHTML : div );
   button.onclick = function() {
   addFIELD();
   };
   fields.className = (( div.className === "show" ) ? "hide" : "show" );
      for ( var x = 0; x <= addFields.length; x++ ) {
      input = document.createElement("input");
      input.type = "text";
      input.id = addFields[ x ].toLowerCase();
      input.size = "30"
      // Setting Attribute's to created field's ( City / State )

      label = document.createElement("lable");
      text = document.createTextNode( addFields[ x ] + ": " );
      label.appendChild( input );
      label.insertBefore( text, input );
      div.appendChild( label );
      div.appendChild( button );
      } 
   } else {
   fields.innerHTML += '<label>City: <input type="text" id="city" name="city" value="" size="30" /></label>\n';
   fields.innerHTML += '<label>State: <input type="text" id="state" name="state" value="" size="30" /></label>\n';
   }
};
window.onload = function() {
time = text.animate( 500 ); // IGNORE THIS EFFECT! 
};
// ]]>
</script>
</head>
<body>
<div id="main">
<div class="tube">
<h2 id="txt"></h2>
<form id="frm" action="#" onsubmit="return false;">
<div id="field" class="show"><label for="address">Address: <input type="text" id="address" name="address" value="" size="30" onfocus="addFIELD();" /></label></div>
<div id="dialogBox" class="hide"></div>
</form>
</div>
</div>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.