JavaScript

<div class="footer" style="position: absolute; bottom: 0px; width: 95%; margin-left: 2%; z-index: 3;">
<button style="width: 80px; background: url(http://localhost/ELMS/Image.axd?t=Close&r=211&g=211&b=211&p=20&h=25) 0% 0% no-repeat transparent;">Close</button>
</div>
<pre>
None of the following code hiding these html controls
<pre>
                $('.footer').css('display', 'none');
                $('.footer').hide();
                $('.no-repeat.transparent;').css('display', 'none');

1. ELMS.Constructs.Popup = function (parameters) {
2. jQuery.fn.convertLinkToPopupWithClose = 
3. this.containerDiv = $("<div class='container'></div>").css (xxxx...),

if (!ELMS.Constructs) {
    ELMS.Constructs = {};
}
 
ELMS.Constructs.Popup = function (parameters) {
    var _that = this;
 
    this.offset = 10;
    this.parameters = parameters;
    this.displayed = false;
 
    this.waitElement = ELMS.Common.generateWaitDiv("Loading Popup...");
 
    this.outsideContainerDiv = $("<div class=\"popup\"></div>")
        .css({
            width: "450px",
            top: this.parameters.y.toString() + "px",
            left: this.parameters.x.toString() + "px",
            overflow: "hidden",
            paddingRight: "10px",
            paddingBottom: "10px",
            height: "400px"
        });
 
    this.containerDiv = $("<div class='container'></div>")
        .css({
            position: "relative",
            marginTop: this.offset.toString() + "px",
            width: "100%",
            paddingBottom: "36px",
            height: "100%"
        })
        .appendTo(this.outsideContainerDiv);
 
    //this.iframeContainerDiv = $("<div></div>")
    //        .css({
    //            width: "100%"
    //        })
    //        .height(this.parameters.height ? this.parameters.height : 400);
 
    $("<div class='handle'></div>").appendTo(this.outsideContainerDiv);
 
    this.createTitle = function (title) {
        _that.titleH2 = $("<h2>" + title + "</h2>");
        _that.containerDiv.prepend(_that.titleH2);
    };
 
    if (this.parameters.title)
        this.createTitle(parameters.title);
 
    //this.iframeContainerDiv.appendTo(this.containerDiv);
 
    this.setTitle = function (title) {
        if (!this.titleH2)
            this.createTitle(title);
        else
            this.titleH2.text(title);
    };
 
    this.iframe = $('<iframe class="popup" frameBorder="0" allowTransparency="true" name="PopupIframe"></iframe>')
        .css({
            width: "100%",
            height: "100%",//(this.parameters.height ? this.parameters.height : 400).toString() + "px",
            position: "absolute",
            zIndex: 1,
            marginTop: "25px",
            top: 0
        });
 
    this.iframe.appendTo(this.outsideContainerDiv);
 
    this.preClose = function () {
        if (_that.parameters.preCloseFunction)
            if (!_that.parameters.preCloseFunction(_that))
                return false;
 
        return true;
    };
 
    this.runningInternalClose = false;
    this.internalCloseFunction = function () {
        if (_that.runningInternalClose)
            return;
 
        _that.runningInternalClose = true;
        if (_that.iframe[0].contentWindow && _that.iframe[0].contentWindow.ELMS && _that.iframe[0].contentWindow.ELMS.Common.isDirty)
            if (!confirm("There are unsaved changes.  Would you like to leave this page?  Any unsaved changes will be lost."))
                return false;
 
        if (!_that.preClose())
            return false;
 
        if (_that.parameters.closeDestroys)
            _that.destroy.apply(_that, arguments);
        else
            _that.hide.apply(_that, arguments);
 
        if (_that.parameters.closeInformsParent) {
            var message = { action: "Close" };
 
            if (_that.parameters.closePayload)
                message.payload = _that.parameters.closePayload;
 
            _that.sendMessage(message);
        }
 
        _that.runningInternalClose = false;
 
        return true;
    };
 
    this.upperClose = $("<image alt='Close Popup' border='0' src='" + ELMS.Common.root + "/images/Popup-Close-Button.png' />")
        .css(
            {
                position: "absolute",
                border: "none",
                fontSize: 0,
                backgroundColor: "transparent",
                height: "25px",
                width: "25px",
                right: "0",
                top: "0",
                cursor: "pointer"
            }
            )
        .click(this.internalCloseFunction)
        .appendTo(this.outsideContainerDiv);
 
    if (this.parameters.showFooter) {
        this.footer = $("<div class=\"footer\"></div>")
            .css({
                position: "absolute",
                bottom: 0,
                width: "95%",
                marginLeft: "2%",
                zIndex: 3
            });
 

        if (this.parameters.showClose) {
            if (event.target.toString().match(/[^\/]+$/)[0].toString().split('?')[0].toString().split('&')[0].toString() != "Popup_ViewWaitingList.aspx") {
                this.closeButton = $("<button style=\"background:transparent url('" + ELMS.Common.root + "/Image.axd?t=Close&r=211&g=211&b=211&p=20&h=25') left top no-repeat;\">Close</button>").appendTo(this.footer);
                ELMS.Common.handleDynamicButtonImages(this.closeButton);
 
                this.closeButton.click(this.internalCloseFunction);
            }
        }
 
        this.footer.appendTo(this.containerDiv);
    }
 
    this.messageCallbacks = [];
    this.addMessageCallback = function (callback) {
        this.messageCallbacks.push(callback);
        return this;
    };
 
    var _popup_this = this;
    this.sendMessage = function (payload) {
        if (payload.action.toLowerCase() == "resize") {
            this.resize({ width: payload.payload.width, height: payload.payload.height });
        } else if (payload.action.toLowerCase() == "redirect") {
            _popup_this.destroy();
            ELMS.Common.getTopLevelWindow().ELMS.Common.wait();
            ELMS.Common.getTopLevelWindow().location.href = ELMS.Common.resolveUrl(payload.payload.url || payload.payload.redirectUrl);
        } else if (_popup_this.messageCallbacks.length == 0 && payload.action.toLowerCase() == "close") {
            if (_popup_this.parameters.showClose && _popup_this.closeButton)
                _popup_this.internalCloseFunction();
            else
                _popup_this.destroy();
        } else {
            for (var i = 0, callback; callback = _popup_this.messageCallbacks[i]; i++) {
                callback(_popup_this, payload);
            }
 
            $(ELMS.Common.getTopLevelWindow().document).trigger("ELMS:ReceivePopupMessage", [ _popup_this , payload ]);
        }
    };
 
    this.setPreCloseFunction = function (preCloseFunction) {
        this.parameters.preCloseFunction = preCloseFunction;
    };
 
    this.show = function (title, element) {
        if (element) {
            ELMS.Common.dimElementBackground(element);
        } else {
            ELMS.Common.dimBackground();
        }
 
        var div = this.outsideContainerDiv,
            body = ELMS.Common.getTopLevelWindow().document.body;
 
        if (div.parent().length > 0) {
            div.show();
        } else {
            if ($.browser.msie && parseInt($.browser.version, 10) <= 8) {
                var html = $("html")[0];
 
                if (html.scrollTop > 0)
                    div.css("top", (25 + html.scrollTop).toString() + "px");
            } else {
                var bodyScrollTop = document.scrollTop ? document.scrollTop : body.scrollTop;
                if (bodyScrollTop > 0)
                    div.css("top", (25 + bodyScrollTop).toString() + "px");
            }
 
            div.appendTo(body);
 
            if (!this.parameters.sourceIframe && !this.parameters.sourceElement && this.parameters.url)
                this.iframe.prop("src", this.parameters.url);
 
            if (!this.parameters.sourceIframe)
                this.wait();
 
            this.iframe.load(this.iframeLoaded);
 
            if (this.parameters.sourceIframe)
                this.iframeLoaded({ target: this.iframe[0] });
 
            div.draggable({ handle: ".handle" });
        }
 
        this.displayed = true;
 
        return this;
    };
 
    this.dimBackground = function () {
        var div = this.outsideContainerDiv,
            height = div.height() - this.offset,
            width = div.width() + 1;
 
        $("<div class='dimBG'></div>")
            .css({
                position: "absolute",
                top: this.offset.toString() + "px",
                left: 0,
                height: height.toString() + "px",
                width: width.toString() + "px",
                background: "transparent url('" + ELMS.Common.root + "/images/Transparent-Bg.png') left top repeat",
                zIndex: 3
            })
            .appendTo(div);
 
        //Disable the upper-right close button -- this technically breaks the boundary of our BG cover, so someone could click it.
        this.upperClose.css("cursor", "default").off("click", this.internalCloseFunction);
    };
 
    this.undimBackground = function () {
        this.outsideContainerDiv.find(".dimBG").remove();
        this.upperClose.css("cursor", "pointer").click(this.internalCloseFunction);
    };
 
    this.wait = function (message) {
        this.outsideContainerDiv.data("oldHeight", this.outsideContainerDiv.height());
        this.outsideContainerDiv.height(this.containerDiv.outerHeight() + 10);
 
        this.waitElement.find("p").text(message);
 
        this.dimBackground();
        this.waitElement.appendTo(this.containerDiv).center(this.containerDiv);
    };
 
    this.unwait = function () {
        this.outsideContainerDiv.height(this.outsideContainerDiv.data("oldHeight"));
 
        this.undimBackground();
        this.waitElement.remove();
    };
 
    this.iframeContentLoaded = function (popup) {
        if (popup) {
            //ELMS.ActivePopup = popup;
 
            var urlChanged = popup.currentUrl && popup.currentUrl != popup.iframe[0].contentWindow.location.href;
            popup.currentUrl = popup.iframe[0].contentWindow.location.href;
 
            if (popup.iframe[0].contentWindow.ELMS)
                popup.iframe[0].contentWindow.ELMS.ParentPopup = popup;
 
            $(popup.iframe[0].contentWindow).resize(function () {
                if (!popup.resizing)
                    popup.resize({ basedOnContent: true });
            });
 
            if (popup.parameters.showTitle && !popup.parameters.title) {
                var text = $(popup.iframe[0].contentDocument).find(".title,h2").first().remove().text();
 
                if (popup.titleH2)
                    popup.titleH2.text(text);
                else
                    popup.createTitle(text);
            }
 
            var actionButtons = $(popup.iframe[0].contentDocument.body).find(".action-buttons");
            if (popup.parameters.showFooter && actionButtons.length > 0) {
                var clone;
 
                if (urlChanged && popup.parameters.processedActionButtons) {
                    this.footer.find(".action-buttons").remove();
                    popup.parameters.processedActionButtons = false;
                }
 
                if (popup.parameters.processedActionButtons) {
                    clone = this.footer.find(".action-buttons").find("button,input[type='submit']").remove();
                    popup.parameters.processedActionButtons = false;
                }
 
                if (!popup.parameters.processedActionButtons) {
                    popup.parameters.processedActionButtons = true;
 
                    clone = actionButtons.clone().css({
                        float: "left",
                        margin: 0,
                        padding: 0,
                        border: "none",
                        width: "auto"
                    });
 
                    if (popup.parameters.showClose && this.closeButton.parent().length > 0) {
                        this.closeButton.before(clone);
 
                        if (actionButtons.find("input[value='Cancel']").length > 0)
                            this.closeButton.remove();
                    } else
                        clone.appendTo(this.footer);
                }
 
                var sourceButtons = actionButtons.find("button,input[type='submit']");
                clone.find("button,input[type='submit']").each(function (index, button) {
                    var sourceButton = sourceButtons[index];
                    button = $(button);
                    button
                        //.off("click")
                        .click(function (event) {
                            $(sourceButton).click();
                        });
 
                    button.data(popup.iframe[0].contentWindow.$(sourceButton).data());
 
                    //This is a bit weird, but the event needs to be attached to the JQuery instance in the iframe.
                    //At the time this code is executed, $ by itself references the host page's JQuery instance.
                    popup.iframe[0].contentWindow.$("#" + sourceButton.id)
                        .on("prop", function (event) {
                            button.prop.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("attr", function (event) {
                            button.attr.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeProp", function (event) {
                            button.removeProp.apply(button, [].splice.call(arguments, 1));
                        })
                        .on("removeAttr", function (event) {
                            button.removeAttr.apply(button, [].splice.call(arguments, 1));
                        });
                });
 
                popup.containerDiv.height(popup.containerDiv.height() - actionButtons.height());
                actionButtons.hide();
 
                if (popup.parameters.showClose && actionButtons.has("input[type='submit'][value='Close']").length > 0)
                    this.closeButton.remove();
            }
 
            if (popup.parameters.sourceElement) {
                var form = $("#form1")[0];
 
                if (form.removeAttribute)
                    form.removeAttribute("target");
                else
                    form.target = null;
 
                form.action = form.action.substring(0, form.action.length - 6);
            }
 
            popup.unwait();
 
            window.setTimeout(function () {
                popup.resize({ load: true, urlChanged: urlChanged });
            }, 250);
        }
    },
 
    this.iframeLoaded = function (event) {
        var popup = ELMS.WebControls.Popup.getPopup(event.target);
        
        if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
            popup.iframe[0].contentWindow.document.open();
 
            var html = $(popup.parameters.sourceIframe.contentWindow.document.documentElement).html();
 
            if ($.browser.msie)
                html = html.replace(/\<script/gi, "<script defer='true'");
 
            popup.iframe[0].contentWindow.document.write(html)
            popup.iframe[0].contentWindow.document.close();
        }
 
        $(event.target.contentDocument).ready
        (
            function () {
                popup.iframeContentLoaded(popup);
            }
        );
    };
 
    this.hide = function (parameters) {
        parameters = $.extend({ destroy: true, runCloseFunction: false }, parameters);
        if (parameters.runCloseFunction && !_that.preClose.call(this))
            return;
 
        var topWindow = ELMS.Common.getTopLevelWindow();
        if (this.displayed) {
            if (parameters.destroy)
                this.outsideContainerDiv.remove();
            else
                this.outsideContainerDiv.hide();  //just hiding
 
            if (parameters.element) {
                ELMS.Common.undimElementBackground(element);
            } else {
                ELMS.Common.undimBackground();
            }
 
            this.displayed = false;
        }
 
        if (parameters.destroy) {
            var popups = topWindow.ELMS.Page.Popups;
 
            for (var i = 0, popup; popup = popups[i]; i++) {
                if (popup == this)
                    popups.splice(i, 1);
            }
        }
 
        return this;
    };
 
    this.resize = function (parameters) {
        this.resizing = true;
        parameters = $.extend({ height: null, width: null, basedOnContent: false, load: false, urlChanged: false }, parameters);
 
        //If nothing sent in, ignore!!
        if (!parameters.height && !parameters.width && !parameters.basedOnContent && !parameters.load)
            return;
 
        parameters.widthSupplied = parameters.width != null;
        parameters.heightSupplied = parameters.height != null;
 
        var iframeBody = this.iframe[0].contentDocument ? this.iframe[0].contentDocument.body : this.iframe[0].contentWindow.document.body,
            titleH2Height = null;
 
        if (this.titleH2)
            titleH2Height = this.titleH2.outerHeight();
 
        if ((!this.parameters.height && parameters.load) || parameters.basedOnContent) {
            //this.iframeContainerDiv.height(0);
 
            parameters.height = iframeBody.clientHeight;// + ($.browser.msie ? 35 : 0);
        } else if (this.parameters.height)
            parameters.height = this.parameters.height;
 
        if (parameters.heightSupplied)
            this.parameters.height = parameters.height;
 
        if (parameters.height)
            this.containerDiv.animate({ height: parameters.height + (titleH2Height || 10) }, 250); //10 is offset of top margin
            //this.containerDiv.height(parameters.height);
 
        if ((!this.parameters.width && parameters.load) || parameters.basedOnContent) {
            if (parameters.basedOnContent || parameters.urlChanged || (parameters.load && !this.widthResized)) {
                parameters.width = iframeBody.scrollWidth - 10;//10 - right padding on container div for close button's transparency effect// + ($.browser.msie ? 75 : 25);

                this.widthResized = true;
            }
        } else if (this.parameters.width)
            parameters.width = this.parameters.width;
 
        if (parameters.widthSupplied)
            this.parameters.width = parameters.width;
 
        if (parameters.width)
            this.outsideContainerDiv.width(parameters.width);
 
        //this.iframe.css("height", "100%");
 
        this.outsideContainerDiv.height(this.containerDiv.height() + 400);
 
        if (titleH2Height != null)
            this.iframe.css("margin-top", (titleH2Height + 11).toString() + "px"); //11 is 10 for offset of top margin plus 1 for border of h2
 
        var _that = this;
        window.setTimeout(function () { _that.resizing = false; }, 250);
    };
 
    this.destroy = function (parameters) {
        this.hide(parameters);
        ELMS.Common.unregisterPopup(this);
    };
 
    if (this.parameters.sourceElement) {
        var _popup = this;
 
        $(this.parameters.sourceElement).click(
            function (event) {
                var form = $("#form1")[0];
 
                form.target = "PopupIframe";
 
                var qs = ELMS.Common.parseQueryString(form.action);
                if (typeof qs.Popup == "undefined")
                    form.action += (Object.keys(qs).length == 0 ? "?" : "&") + "Popup";
 
                _popup.show();
            });
    }
}
 
var control =
    {
        name: "Popup",
        getPopup: function (iframeOrUrl) {
            for (var i = 0, popup; popup = ELMS.Common.getTopLevelWindow().ELMS.Page.Popups[i]; i++) {
                if (typeof iframeOrUrl == "string") {
                    if (popup.parameters.url == iframeOrUrl ||
                        (popup.iframe && popup.iframe[0].contentWindow.location.href == iframeOrUrl))
                        return popup;
                } else {
                    if (popup.iframe) {
                        if (popup.iframe[0] == iframeOrUrl)
                            return popup;
                    } else {
                        if (popup.parameters.url == iframeOrUrl.src)
                            return popup;
                    }
                }
            }
 
            return null;
        },
        createPopup: function (parameters) {
            if (parameters.width)
                parameters.widthProvided = true;
 
            parameters = $.extend({ x: 20, y: 20, showClose: false, showTitle: true, closeDestroys: true, showFooter: true }, parameters);
 
            if (!parameters.url && !parameters.sourceElement && !parameters.sourceIframe) {
                alert("parameters.url must be specified (Popup.createPopup).");
                return;
            }
 
            if (parameters.showClose)
                parameters.showFooter = true;
 
            if (parameters.url) {
                var qs = ELMS.Common.parseQueryString(parameters.url),
                qsCount = 0;
                if (!qs.Popup) {
                    for (var prop in qs)
                        if (prop != parameters.url)
                            qsCount++;
 
                    parameters.url += (qsCount == 0 ? "?" : "&") + "Popup";
                }
            }
 
            var topWindow = ELMS.Common.getTopLevelWindow();
            parameters.headerHeight = topWindow.$("#header").height();
            if (parameters.headerHeight && parameters.headerHeight > parameters.y)
                parameters.y = parameters.headerHeight + 50;
 
            var popup = new ELMS.Constructs.Popup(parameters);
 
            if (!topWindow.ELMS.Page.Popups) {
                topWindow.ELMS.Page.Popups = [];
            }
            topWindow.ELMS.Page.Popups.push(popup);
            ELMS.Common.registerPopup(popup);
 
            if (popup.parameters.sourceIframe && popup.parameters.sourceIframe.tagName && popup.parameters.sourceIframe.tagName == "IFRAME") {
                popup.iframe.css("display", "block");
                popup.show();
            }
 
            return popup;
        },
        convertLinkToPopupWithClose: function (event, informParentOnClose) {
            return ELMS.WebControls.Popup.convertLinkToPopup(event, { showClose: true, closeInformsParent: informParentOnClose | false });
        },
        convertLinkToPopup: function (event, parameters) {
            event.preventDefault();
            event.stopPropagation();
 
            var hyperlink = $(event.target).closest("a")[0],
                parameters = $.extend(
                    {
                        url: hyperlink.href,
                        caller: hyperlink,
                        event: event,
                        buttonSelector: ".buttons",
                        usesHelp: false,
                        title: event.target["title"]
                    }, parameters);
 
            var popup = ELMS.WebControls.Popup.createPopup(parameters);
 
            if (ELMS.Page.receivePopupMessage)
                popup.addMessageCallback(ELMS.Page.receivePopupMessage);
 
            popup.show();
 
            return popup;
        }
    };
 
ELMS.Common.registerWebControl(control);
 
jQuery.fn.convertLinkToPopup = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopup);
    });
};
 
jQuery.fn.convertLinkToPopupWithClose = function () {
    this.each(function (index, element) {
        $(element).click(ELMS.WebControls.Popup.convertLinkToPopupWithClose);
    });
};

<ul id="reports-All_Reports" class="active"><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/ChildDates.rdl&Dynamic">Child Dates</span><span class="description">Detailed date information about an individual child (for DEL only).</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/Demographics.rdl">Child Demographics</span><span class="description">Characteristics of children and families enrolled in ECEAP</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/ChildSummaryReport.rdl">Child Record Summary</span><span class="description">Enrollment, health, child development and family information for an individual child.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/Classlist.rdl">Class List</span><span class="description">Lists Class names and characteristics.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/ClassRoster.rdl">Class Roster</span><span class="description">Lists child names, birthdate,  first language,  parent name and contact information, with space for staff to add notes.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/ClassSummary.rdl">Class Summary</span><span class="description">Shows information entered on the Class pages of ELMS for one class, or compiled for a site, contractor or (for DEL staff) statewide.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/ContractorList.rdl">Contractor List</span><span class="description">Lists Contractor names and characteristics.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/DevelopmentalScreening.rdl">Developmental Screening</span><span class="description">Children's development screening dates and results.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/EceapDirectorsRoster.rdl">Directors Roster</span><span class="description">List of ECEAP contractors, funded ECEAP slots, directors, contact information and counties served.</span></li><li class="report"><span class="title" report-url="/ELMS/Reports/Definitions/QRISReport.rdl">ELMS Site Data for Early Achievers</span><span class="description">List of all ECEAP and Head Start sites for the current school year.</span></li><li class="report active"><span class="title" report-url="/ELMS/Reports/Definitions/EnrollmentByChild.rdl">Enrollment by Child</span><span class="description">Lists children with their age, poverty level, IEP status, priority points and first and last days attending class. 

<input id="phb_rdbCurrentEnrollment" type="radio" name="ctl00$phb$ReportMode" value="rdbCurrentEnrollment" checked="checked">

<!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>
<title>Student Scores</title>
<link rel="stylesheet" type="text/css" href="default.css" />
<script type="text/javascript" src="student_scores.js"></script>
</head>
 
<body>
<div id="content">
    <h1>Student Scores</h1>
    <div class="formLayout">
        <label>Last Name:</label>
        <input type="text" id="last_name" /><br />
 
        <label>First Name:</label>
        <input type="text" id="first_name" /><br />
 
        <label>Score:</label>
        <input type="text" id="score" /><br />
 
        <label>&nbsp;</label>
        <input type="button" id="add_button" value="Add Student Score" /><br />
    </div>
    <h2>Student Scores</h2>
    <p><textarea id="scores" rows="5" cols="60"></textarea></p>
    <div class="formLayout">
        <label>Average score:</label>
        <input type="text" id="average_score"/><br />
 
        <label>&nbsp;</label>
        <input type="button" id="clear_button" value="Clear Student Scores" /><br />
 
        <label>&nbsp;</label>
        <input type="button" id="sort_button" value="Sort By Last Name" /><br />
    </div>
</body>
</html>

var scores = [];
 
var $ = function (id) { return document.getElementById(id) }
 
var displayScores = function () {
    var scoreNumber = parseInt( $("score").value );
    var scoreString = $("last_name").value + ", " +
                      $("first_name").value + ": " +
                      $("score").value;
 
        if (scoreSting.length == 0) {
 
    for (var i = 0; i < displayScores.length; i++) {
        var scores = displayScores[i];
        for (var i in scores) { displayScores += scores[scoreString] + ", ";  }
    $("average_score").value = getAverageScore(scoreNumber);
}
var addScore = function () {
    var scoreNumber = parseInt( $("score").value );
    var scoreString = $("last_name").value + ", " +
                      $("first_name").value + ": " +
                      $("score").value;
    scores.push(scoreNumber);
    scoresString.push(scoreString);
    displayScores();
}
var getAverageScore = function () {
    var scoreNumber = score.length;
    var sum = 0;
    if (scoreNumber > 0) {
        for (var i = 0; i in scoreNumber; i++)
            sum += score[i][2];
    }
    $("average_Score").value = sum / scoreNumber;
}
var sortScores = function () {
    scoresString.sort();
    displayScores();
}
}
window.onload = function() {
    $("add_button").onclick = add_button;
    $("sort_button").onclick = sort_button;
}

var control ={
---
convertLinkToPopupWithClose: function (event, informParentOnClose) {
    return ELMS.WebControls.Popup.convertLinkToPopup(event, { showClose: true, closeInformsParent: informParentOnClose | false });
},
convertLinkToPopupWithoutClose: function (event, informParentOnClose) {
    return ELMS.WebControls.Popup.convertLinkToPopup(event, { showClose: false, closeInformsParent: informParentOnClose | false });
},
----
}

<!DOCTYPE html><html>
    <!--To POST data like an HTML form, add an HTTP header with 
 
setRequestHeader
    (). Specify the data you want to send in the send() method:-->
    <head>
    <meta charset=utf-8>
    <title>calculator insert form</title>
    <style type="text/css">
    input{
    text-align:center;
    }
    </style>
    </head>
    <body><center>
<input type="text" size="45" align="middle" value="enter purpose 
 
in box below" >
 
<input type="text" align="middle" name="purpose" size="45" > 
    <FORM name="Keypad" 
 
action="http://localhost/home/calcinsert.php" method="post">
    <TABLE>
    
    <TABLE border=2 width=50 height=60 cellpadding=1 
 
cellspacing=5>
    <TR>
    <TD colspan=3 align=middle>
    <input name="ReadOut" type="Text" size=24 value="0"     
 
width=100%></TD>
    <TD></TD>
  <TD><input name="btnClear" type="Button" value="   C    " 
 
onclick="Clear()"></TD>
  <TD><input name="btnClearEntry" type="Button" value="    CE    " 
 
onclick="ClearEntry()"></TD>
    </TR><TR>
  <TD><input name="btnSeven" type="Button" value="    7    " 
 
onclick="NumPressed(7)"></TD>
  <TD><input name="btnEight" type="Button" value="    8    " 
 
onclick="NumPressed(8)"></TD>
  <TD><input name="btnNine" type="Button" value="    9    " 
 
onclick="NumPressed(9)"></TD>
      <TD></TD>
  <TD><input name="btnNeg" type="Button" value="   +/-   " 
 
onclick="Neg()"></TD>
    <TD><input name="btnPercent" type="Button" value="    %    " 
 
onclick="Percent()"></TD>
      </TR><TR>
  <TD><input name="btnFour" type="Button" value="    4    " 
 
onclick="NumPressed(4)"></TD>
   <TD><input name="btnFive" type="Button" value="    5    " 
 
onclick="NumPressed(5)"></TD>
   <TD><input name="btnSix" type="Button" value="    6    " 
 
onclick="NumPressed(6)"></TD>
      <TD></TD>
   <TD align=middle><input name="btnPlus" type="Button" value="    
 
+    " onclick="Operation('+')"></TD>
   <TD align=middle><input name="btnMinus" type="Button" value="   
 
 -    " onclick="Operation('-')"></TD>
      </TR><TR>
   <TD><input name="btnOne" type="Button" value="    1    " 
 
onclick="NumPressed(1)"></TD>
   <TD><input name="btnTwo" type="Button" value="    2    " 
 
onclick="NumPressed(2)"></TD>
    <TD><input name="btnThree" type="Button" value="    3    " 
 
onclick="NumPressed(3)"></TD>
      <TD></TD>
    <TD align=middle><input name="btnMultiply" type="Button" 
 
value="    *    " onclick="Operation('*')"></TD>
    <TD align=middle><input name="btnDivide" type="Button" value=" 
 
   /    " onclick="Operation('/')"></TD>
      </TR><TR>
    <TD><input name="btnZero" type="Button" value="    0    " 
 
onclick="NumPressed(0)"></TD>
    <TD><input name="btnDecimal" type="Button" value="    .    " 
 
onclick="Decimal()"></TD>
      <TD colspan=3></TD>
 
<td><input type="button" name="btnEquals" class="red" value="    = 
 
     " onClick="Operation('='); this.form.submit();
event.returnValue = false;"></td>
 
    </TR></TABLE></TABLE></FORM>
 
<a href="http://localhost/home/calcprint.php">Print</a>
    </CENTER>
    <font face="Verdana, Arial, Helvetica" size=2>
 
    <script>
    var FKeyPad = document.Keypad;
    var Accumulate = 0;
    var FlagNewNum = false;
    var PendingOp = "";
    function NumPressed (Num)
 {
    if (FlagNewNum)
    {FKeyPad.ReadOut.value = Num;FlagNewNum = false;}
   else {if (FKeyPad.ReadOut.value == "0") FKeyPad.ReadOut.value = 
 
Num;
    else FKeyPad.ReadOut.value += Num;}
 }
    function Operation (Op)
 {
    var Readout = FKeyPad.ReadOut.value;
    if (FlagNewNum && PendingOp != "=");
    else
 {
    FlagNewNum = true;
    if ( '+' == PendingOp )
    Accumulate += parseFloat(Readout);
    else if ( '-' == PendingOp )
    Accumulate -= parseFloat(Readout);
    else if ( '/' == PendingOp )
    Accumulate /= parseFloat(Readout);
    else if ( '*' == PendingOp )
    Accumulate *= parseFloat(Readout);
    else
    Accumulate = parseFloat(Readout);
    FKeyPad.ReadOut.value = Accumulate;
    PendingOp = Op;
 }
  }
    function Decimal ()
 {
    var curReadOut = FKeyPad.ReadOut.value;
    if (FlagNewNum)
    {curReadOut = "0.";FlagNewNum = false;}
    else
    {if (curReadOut.indexOf(".") == -1) curReadOut += ".";}
    FKeyPad.ReadOut.value = curReadOut;
 }
    function ClearEntry ()
    {FKeyPad.ReadOut.value = "0";FlagNewNum = true;}
    function Clear ()
    {Accumulate = 0;PendingOp = "";ClearEntry();}
    function Neg ()
    {FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * 
 
-1;}
    function Percent ()
    {FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 
 
100) * parseFloat(Accumulate);}
    </SCRIPT>
 
// ************error indicated in below script********

    <script>
    var js_var = "
whatever";
    document.getElementById("link").onclick = OnCalc ();
 { 
               // ajax start
    var xhr;
    if (window.XMLHttpRequest) xhr = new XMLHttpRequest();
    else xhr = new ActiveXObject("Microsoft.XMLHTTP"); // for IE
var url = 'http://localhost/home/calcinsert.php?js_var=' + js_var;
    xhr.open('GET', url, false);
    xhr.onreadystatechange = function ()
 { 
    if (xhr.readyState===4 && xhr.status===200)
 { 
    var div = document.getElementById("update");
    div.innerHTML=xhr.responseText;
 }
  };
    xhr.send();
    // ajax stop
    return false;
 }
    </script>
    </body></html>
--------------------

<?php
$servername = "localhost";$username = "root";$password = "cookie";
$dbname = "homedb";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $dbname);
// Check connection
if (!$conn)
   { die("Connection failed: " . mysqli_connect_error()); }
$sql = "INSERT INTO calculator (purpose, value1, op, value2, total)
VALUES ('purpose', 'value1', 'op', 'value2', 'total')";
if (mysqli_query($conn, $sql))
   {
 echo "<center>";   
 echo "data entered
 
"; 
  } 
else
   { echo "Error: " . $sql . "
" . mysqli_error($conn); }
mysqli_close($conn);
 
header( "refresh:3;url='xxxxxxx'");
echo "<center>";
echo 'I\m old and slow</br>
in a rush, click 
<a href="http://localhost/home/calcform.html">here</a>.'
     ?>