VirtualMV/JavaScript/Case Study: Forms/Pop-up Window

From WikiEducator
Jump to: navigation, search



Demonstrating how form data is displayed in a pop-up window

Ok so here we'll look at two different pop-up windows: the first is a simple one that just displays an html page and the second will grab the data from the form and display.

A simple Pop-up Window

Popup Window showing HTML Page
function fnNewReleases() {
	      window.open("vmv_js-NewReleases.html","winNewReleases",
   "toolbar=no,location=yes,directories=no,\
    status=no,menubar=no,scrollbars=yes,resizable=no,\
    copyhistory=yes,width=640,height=480")
  }

And in order for it to work we need to create an HTML page vmv_js-NewReleases.html

<html>
<head>
  <title>New Releases</title>
  <style type='text/css'>
    h1 { color: #00FF00; }
  </style>
  </head>
  <body>
    <h1>New Releases</h1>
    <h2>Rome in a day</h2>
    <p>[image] DVD description</p>
    <h2>Dhaka by night</h2>
    <p>[image] DVD description</p>
   </body>
</html>

A Pop-up window with data from the Form

JavaScript DVD Case Study: Popup Window showing Rentals

I have added comments into the code to show you what is happening.

function fnDisplayForm() {
//  Make sure data is ok
  fnCheckData();
// If Ok display form 
  if ( document.myForm.chkFormOk.checked == true ) {
    //Calculate the total from the table
    var varMyTable = document.getElementById('myTable');
    var varRows = varMyTable.rows.length;
    var intCost = 0;
	if (varRows > 1) { 
	   for (intI = 1; intI < varRows; intI++) {
 	     intCost += parseInt (varMyTable.rows[intI].cells[2].innerHTML);
	   }
	  }
        // create a window instance called winMsg. the _blank will force a second browser window (or tab)
	winMsg=window.open("","_blank");
        //In JS create the HTML file
	winMsg.document.write("<html><head><title>Rentals</title>");
	winMsg.document.write("</head>");
	winMsg.document.write("<body>");
	winMsg.document.write("<h2>Rentals</h2>");
	// Display the Name
	strFullName = document.myForm.txtFullName.value;
	winMsg.document.write("<h3>"+ "Name: " + strFullName + "</h3>");
	// Customer type (You will need to make some changes to show the other types - I have just done the first one)
	chkCuType=document.myForm.chkCuType;
	var strX = ""
       if (chkCuType[0].checked) {strX = strX + chkCuType[0].value +" ";};
	if (strX.length == 0) { strX = "None"; }
	winMsg.document.write("<p>Customer type: " + strX +"</p>");
        // A sneaky way to display the table - just grab the whole table (varMyTable is set earlier)
	winMsg.document.write("<table border='1'>" + varMyTable.innerHTML + "</table>");
	winMsg.document.write("<p> Total Cost = " + intCost + "<p>");
	winMsg.document.write("</body></html>");
  } else { alert ("error in data") }
}

VmvIcon References.png References

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Case Study: Forms/Pop-up Window. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 23, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Case_Study:_Forms/Pop-up_Window    (zotero)