Link to home
Start Free TrialLog in
Avatar of sramkris
sramkris

asked on

How to use frames in this page..

Hey all

I have page which has 2 text boxes which display the date using Calendar Control. I want to add 2 frames to this page and display 2 other pages one by using a link and the 2nd i have to display on the submit button click. How do i do that??

Here is the code for the page which i am using..

Thanks
Ram


<html>
<%
Response.Write Request.Form("date1") & "<BR>"
Response.Write Request.Form("date2")
%>

<SCRIPT Language="JAVASCRIPT">
var frmField, frmValue,aMonth;
var minYear = 1970, maxYear = 2050;

document.write('<table id="tblCalender" cellpadding="1" cellspacing="1" border="0"'
     +'style="position:absolute;visibility:hidden;font-family:sans-serif;font-size:8pt;font-weight:bold;border:thin solid #000;background-color:#ccc;">');
document.write('<tr>');
document.write('<td colspan="6" align="center">');

document.write('<select name="optCalenderMonth" onchange="updateMenu();" style="font-size:8pt;font-weight:bold;">');
for (i=0; i<12; i++){
     document.write('<option value="' + i + '">' + getMonths(i) + '</option>');
}
document.write('</select>&nbsp;&nbsp;');

document.write('<select name="optCalenderYear" onchange="updateMenu();" style="font-size:8pt;font-weight:bold;">');
for (i=minYear; i<=maxYear; i++){
     document.write('<option value="' + i + '">' + i + '</option>');
}
document.write('</select>');
document.write('</td>');

document.write('<td align="right" valign="top"><span style="cursor:hand;font-size:8px;text-align:center;" '
     + 'onmouseover="closeOver();" '
     + 'onmouseout="closeOut();" '
     + 'onclick="closeClick();">&nbsp;X&nbsp;</span></td>');
document.write('</tr>');

document.write('<tr>');
var str = "Sun,Mon,Tue,Wed,Thu,Fri,Sat";
var arr = str.split(',');
for (i=0; i<7; i++){
     document.write('<th style="background-color:#fff;">' + arr[i] + '</th>');
}
document.write('</tr>');
// Grid
for (i = 0; i < 6; i++) { // 6 weeks
     document.write('<tr>');
     for (j = 0; j < 7; j++) { // 7 days per week
          document.write('<td id="tdCalender" style="text-align:left;vertical-align:top;width:25px;cursor:hand;background-color:#fff;" '
               + 'onmouseover="calOver();" '
               + 'onmouseout="calOut();" '
               + 'onclick="calClick();">');
          document.write('</td>');
     }
     document.write('</tr>');
}
document.write('</table>');


function getDates(y, m) {
     var dates = new Array(42);
     var first = new Date(y, m, 1).getDay();
     var days = 32 - new Date(y, m, 32).getDate();
     var i = 1;
     for (j = first; j <first+days; j++) {
          dates[j] = i;
          i++;
     }
     return dates;
}
function getMonths(i){
     var sMonths = "January,February,March,April,May,June,July,August,September,October,November,December";
     aMonth = sMonths.split(',');
     return aMonth[i];
}
function updateMenu(){
     updateCalender(document.getElementById('optCalenderYear').value, document.getElementById('optCalenderMonth').value);
}
function updateCalender(y, m) {
     var arr = getDates(y, m);
     for (i=0; i<document.getElementById('optCalenderYear').options.length; i++) {
          if (document.getElementById('optCalenderYear').options[i].value == y) {
               document.getElementById('optCalenderYear').options.selectedIndex = i;
          }
     }
     for (i=0; i<document.getElementById('optCalenderMonth').options.length; i++) {
          if (document.getElementById('optCalenderMonth').options[i].value == m) {
               document.getElementById('optCalenderMonth').options.selectedIndex = i;
          }
     }
     for (i=0; i<arr.length; i++) {
          if (!isNaN(arr[i])) tdCalender[i].innerText = arr[i];
          else tdCalender[i].innerText = "";
     }
}
function popupCalender(field){
     
//     alert(field)
frmField = document.getElementById(field);
     frmValue = frmField.value;
     var thisDate, thisYear, thisMonth;
     with (document.getElementById('tblCalender')){
          style.visibility = "visible";
          style.top = document.body.scrollTop + event.clientY - 10;
          style.left = document.body.scrollLeft + event.clientX + 6;
//          style.top = field.style.top-10;
//          style.left = field.style.left + 6;

     }
     var reDate = /^\d{2}\/\d{2}\/\d{4}$/;
     if (reDate.test(frmValue)) {
          thisDate = frmValue.split('/');
          thisYear = thisDate[2];
          thisMonth = thisDate[0]-1;
     }
     else {
          thisDate = new Date();
          thisYear = thisDate.getFullYear();
          thisMonth = thisDate.getMonth();
     }
     document.all.optCalenderMonth.focus();
     updateCalender(thisYear, thisMonth);
}
function calOver() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          event.srcElement.style.color = "#f00";
     }
}
function calOut() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          event.srcElement.style.color = "#000";
     }
}
function calClick() {
     if (!isNaN(parseInt(event.srcElement.innerText))) {
          var strDate = "";
          var strMonth = parseInt(document.getElementById('optCalenderMonth').options[document.getElementById('optCalenderMonth').selectedIndex].value);
          var strYear = document.getElementById('optCalenderYear').options[document.getElementById('optCalenderYear').selectedIndex].value.substring(2,4);
          if (parseInt(event.srcElement.innerText) < 10) strDate += "0";
          strDate += event.srcElement.innerText + '-' + aMonth[strMonth].substring(0,3) + '-';
          strDate += strYear;
          frmField.value = strDate;
          document.getElementById('tblCalender').style.visibility = "hidden";
     }
}
function closeOver() {
     event.srcElement.style.backgroundColor = "#006";
     event.srcElement.style.color = "#fff";
}
function closeOut() {
     event.srcElement.style.backgroundColor = "#ccc";
     event.srcElement.style.color = "#000";
}
function closeClick() {
     frmField.value = frmValue;
     document.getElementById('tblCalender').style.visibility = "hidden";
}

</SCRIPT>
<BODY>

<form METHOD="POST" ACTION="Workshop3.htm"> <center> <b>  HTML Training </b> </center> <br> <br> Start Date
<input type="text" name="date1" onFocus="popupCalender('date1')" size="20">
<p> &nbsp End Date
<input type="text" name="date2" onFocus="popupCalender('date2')" size="20"></p>
<p>&nbsp;<input type="submit" name="b1"> </p>

</form>
</BODY>
</html>
ASKER CERTIFIED SOLUTION
Avatar of RobMe
RobMe
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sramkris
sramkris

ASKER

Thanks for your input but i am not sure i understand it right cause i have not used html before. I want to display all the information on the same date.htm page. I dont want to open another html page.
I want couple of frames on the same page and display one of the pages on the click of the submit button and the other either by using a link.

Thanks
Ram
Avatar of RobMe
RobMe
Have a look at http://www.geocities.com/r_israelsson/test/date.htm

is that anywhere near what you want to do?
Avatar of sramkris
sramkris

ASKER

Sorry for not replying back earlier as this work was put in the back burner..i will give the points to you for the ans.

Thanks