JSFiddle - React, Tailwind, and code Playground

by Sanjay Ingole

HTML

<FORM ACTION="history.do" METHOD="POST" NAME="HistoryFilterCriteriaForm">
     <div style="margin-left : 70px;">
    <table>
    <TBODY>
<TR>
<TD>from</TD>
<TD><INPUT onchange=doubleDigits(this);return onkeypress="return numbersonly(this, event)" onkeyup=autoTab(this,document.all.fromDay,event); onblur=doubleDigits(this) class=frmnormal style="WIDTH: 20px" maxLength=2 size=1 value=02 name=fromMonth>&nbsp;<B>/</B>&nbsp;<INPUT onchange="doubleDigits(this);return " onkeypress="return numbersonly(this, event)" onkeyup=autoTab(this,document.all.fromYear,event); onblur=doubleDigits(this) class=frmnormal style="WIDTH: 20px" maxLength=2 size=1 value=23 name=fromDay>&nbsp;<B>/</B>&nbsp;<INPUT onkeypress="return numbersonly(this, event)" class=frmnormal style="WIDTH: 35px" maxLength=4 size=2 value=2015 name=fromYear>&nbsp;<A onclick='getDate(fromMonth,fromDay,fromYear,"fromFilterDate",getCalPosition("fromDay", 170, 150, "HistoryFilterCriteriaForm")); return false;' id=fromFilterDate href="http://localhost:7001/cf/history.do?hdn_button=History#" name=fromFilterDate><IMG border=0 src="http://localhost:7001/cf/images/icon_Calendar.gif"></A></TD></TR>
<TR>
<TD>to</TD>
    
    <TD>
        <INPUT onchange=doubleDigits(this);return onkeypress="return numbersonly(this, event)" onkeyup=autoTab(this,document.all.toDay,event); onblur=doubleDigits(this) class=frmnormal style="WIDTH: 20px" maxLength=2 size=1 value=02 name=toMonth>&nbsp;<B>/</B>&nbsp;
            <INPUT onchange="doubleDigits(this);return " onkeypress="return numbersonly(this, event)" onkeyup=autoTab(this,document.all.toYear,event); onblur=doubleDigits(this) class=frmnormal style="WIDTH: 20px" maxLength=2 size=1 value=10 name=toDay>&nbsp;<B>/</B>&nbsp;<INPUT onkeypress="return numbersonly(this, event)" class=frmnormal style="WIDTH: 35px" maxLength=4 size=2 value=2015 name=toYear>&nbsp;
        <A onclick='getDate(toMonth,toDay,toYear,"toFilterDate",getCalPosition("toDay", 170, 150, "HistoryFilterCriteriaForm"));...

JavaScript

var fromMonth = '';
var fromDay = '';
var fromYear = '';
var toMonth = '';
var toDay = '';
var toYear = '';

function inParentDiv(id,containerid){
  var t = document.getElementById(id);
    if(typeof(t) === 'undefined') {
    return;
    }
  while (t = t.parentNode) {
    if (t.id === containerid) {               
        return true;
    }
  }
  return false;
}

//alert(inParentDiv('c','a'));
//alert(inParentDiv('c','v'));



// Set the position of the popup window based on the anchor
function PopupWindow_getXYPosition(anchorname) {
    var coordinates;
    if (this.type == "WINDOW") {
        coordinates = getAnchorWindowPosition(anchorname);
        }
    else {
        coordinates = getAnchorPosition(anchorname);
        }

    this.x = coordinates.x;
    this.y = coordinates.y-140;
   
//this.y=683;
    }
// Set width/height of DIV/popup window
function PopupWindow_setSize(width,height) {
    this.width = width;
    this.height = height;
    }
// Fill the window with contents
function PopupWindow_populate(contents) {
    this.contents = contents;
    this.populated = false;
    }
// Refresh the displayed contents of the popup
function PopupWindow_refresh() {
    if (this.divName != null) {
        // refresh the DIV object
        if (this.use_gebi) {
            document.getElementById(this.divName).innerHTML = this.contents;
            }
        else if (this.use_css) { 
            document.all[this.divName].innerHTML = this.contents;
            }
        else if (this.use_layers) { 
            var d = document.layers[this.divName]; 
            d.document.open();
            d.document.writeln(this.contents);
            d.document.close();
            }
        }
    else {
        if (this.popupWindow != null && !this.popupWindow.closed) {
            this.popupWindow.document.open();
            this.popupWindow.document.writeln(this.contents);
            this.popupWindow.document.close();
            }
        }
    }
// Position and show the...