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() {"vmv_js-NewReleases.html","winNewReleases",

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

  <title>New Releases</title>
  <style type='text/css'>
    h1 { color: #00FF00; }
    <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>

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
// 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)"","_blank");
        //In JS create the HTML file
	// 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)
	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>");
  } 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    (zotero)