VirtualMV/JavaScript/Case Study: Forms/Pop-up Window
From WikiEducator
< VirtualMV | JavaScript | Case Study: Forms
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
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
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") } }
References
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/Case Study: Forms/Pop-up Window. (2024). In WikiEducator/VirtualMV wiki. Retrieved November 21, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/Case_Study:_Forms/Pop-up_Window (zotero)
|
