473,887 Members | 2,284 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

while selecting a column in the listbox related colum to be populated in other listbo

27 New Member
Expand|Select|Wrap|Line Numbers
  1. 1. <head>
  2.    2. <script type="text/javascript">
  3.    3. </script>
  4.    4.   </head>
  5.    5. <body>
  6.    6. <form>
  7.    7. <select name="team" id="mylist" >
  8.    8. <option></option>
  9.    9. <option>north</option>
  10.   10. <option>south</option>
  11.   11. <option>east</option>
  12.   12. <option>west</option>
  13.   13. </select>
  14.   14.  
  15.   15. <select name="assignedto" id="mylist1" >
  16.   16.     <option></option>
  17.   17.     <option>rose</option>
  18.   18.     <option>lily</option>
  19.   19.     <option>lotus</option>
  20.   20.     <option>basil</option>
  21.   21.     <option>iris</option>
  22.   22.     <option>champa</option>
  23.   23.     <option>orchid</option>
  24.   24.     <option>sonki</option>
  25.   25.     </select>
  26.   26. </form>
  27.   27. </body>
  28.   28. </html>
  29.  
Mar 19 '09 #1
9 3214
ahilar12
27 New Member
hi all,

Two listboxes are there, one populated with countries and other populated with the states.

My question is that when u select a country from one listbox,the other listbox should be populated with the values related to that particular country.

Say for example if india is selected from one listbox the states like tamiladu,rajast han,karnataka etc to be populated in the second listbox so that we choose from that.

I hope that i will get a solution for this

thanks
Mar 19 '09 #2
gits
5,390 Recognized Expert Moderator Expert
threads merged ... don't post questions in the insights-section and use the coe-tags when posting source code.

regards,
MOD
Mar 19 '09 #3
acoder
16,027 Recognized Expert Moderator MVP
The exact solution you're looking for depends on a few things:
1. Do you want to avoid a page reload/unload? If yes, then it's either Ajax or plain JavaScript.
2. Will the code be retrieved from the server each time or will it all be loaded the first time?
3. Do you want it to be triggered immediately or after clicking a button?
4. What format will the data be in?
Mar 19 '09 #4
ahilar12
27 New Member
Hi acoder,

no need to be a page reload,let it be a plain javascript.
it will be loaded the first time
it should be triggered once we select the value from one selection box
it is a text data

there list boxes are going to be inside a form where we have many form navigation

kindly find the attachment where i have given the image of the two list boxes and how it should work

Thanks in advance
Attached Images
File Type: jpg sample1.jpg (7.1 KB, 281 views)
Mar 20 '09 #5
ahilar12
27 New Member
the next condition if its going to be another team the output is as follows in the image(the same listboxes only) but different condition

i hope it could be understood

thanks in advance
Attached Images
File Type: jpg sample2.jpg (8.6 KB, 253 views)
Mar 20 '09 #6
ahilar12
27 New Member
Expand|Select|Wrap|Line Numbers
  1. =javascript
  2.  
  3. <html>
  4. <head>
  5.  
  6. <script language="javascript" >
  7.  
  8. function fillteam()
  9.  // this function is used to fill the team list on load
  10. addOption(document.frm1.team, "North", "North", "");
  11. addOption(document.frm1.team, "South", "South", "");
  12. addOption(document.frm1.team, "East", "East", "");
  13. addOption(document.frm1.team, "West", "West", "");
  14. }
  15. function Selectassignedto()
  16. {
  17.  
  18. removeAllOptions(document.frm1.assignedto);
  19. addOption(document.frm1.assignedto, "", "ASSIGNEDTO", "");
  20.  
  21. if(document.frm1.team.value == 'North')
  22.     {
  23.     addOption(document.frm1.assignedto,"Rose", "Rose");
  24.     addOption(document.frm1.assignedto,"Lily", "Lily");
  25.  
  26.     }
  27. if(document.frm1.team.value == 'South')
  28.     {
  29.     addOption(document.frm1.assignedto,"Basil", "Basil");
  30.     addOption(document.frm1.assignedto,"Lotus", "Lotus");
  31.  
  32.     }
  33. if(document.frm1.team.value == 'East')
  34.     {
  35.     addOption(document.frm1.assignedto,"Champa", "Champa");
  36.     addOption(document.frm1.assignedto,"Sonki", "Sonki");
  37.  
  38.     }
  39. if(document.frm1.team.value == 'West')
  40.     {
  41.         addOption(document.frm1.assignedto,"Iris", "Iris", "");
  42.         addOption(document.frm1.assignedto,"Orchid", "Orchid");
  43.     }
  44.  
  45. }
  46.  
  47.  
  48. function removeAllOptions(selectbox)
  49. {
  50.     var i;
  51.     for(i=selectbox.options.length-1;i>=0;i--)
  52.     {
  53.  
  54.         selectbox.remove(i);
  55.     }
  56. }
  57.  
  58.  
  59. function addOption(selectbox, value, text )
  60. {
  61.     var optn = document.createElement("OPTION");
  62.     optn.text = text;
  63.     optn.value = value;
  64.  
  65.     selectbox.options.add(optn);
  66. }
  67.  
  68. </script>
  69. </head>
  70.  
  71. <form name="frm1" method="post" action="">
  72.  
  73. <table>
  74. <TR>
  75.     <th>Team<font color="red">*</font>
  76. </th><td>
  77. <body onload="fillteam();">
  78.  
  79. <select name="team" onChange="Selectassignedto();" >
  80. <option>TEAM</option>
  81.  
  82. </select>
  83. </td>
  84.     <th>Assigned To</th>
  85.     <TD>
  86.     <select name="assignedto">
  87.     <option>ASSIGNEDTO</option>
  88.  
  89.     </select>
  90.  
  91.  
  92.     </TD>
  93. </TR>
  94.  
  95.  
  96. </form>
  97.  
  98. <form name="frm" action="" method="POST"  />
  99.  
  100.  <link rel="STYLESHEET" type="text/css" href="styles/calendar.css">
  101.  
  102.     <script language="JavaScript"  type="text/javascript">
  103.  
  104.  
  105.     var timeoutDelay = 2000; // milliseconds, change this if you like, set to 0 for the calendar to never auto disappear
  106.     var g_startDay = 0// 0=sunday, 1=monday
  107.  
  108.     // preload images
  109.     var imgUp = new Image(8,12);
  110.     imgUp.src = 'images/up.gif';
  111.     var imgDown = new Image(8,12);
  112.     imgDown.src = 'images/down.gif';
  113.  
  114.     // used by timeout auto hide functions
  115.     var timeoutId = false;
  116.  
  117.     // the now standard browser sniffer class
  118.     function Browser(){
  119.       this.dom = document.getElementById?1:0;
  120.       this.ie4 = (document.all && !this.dom)?1:0;
  121.       this.ns4 = (document.layers && !this.dom)?1:0;
  122.       this.ns6 = (this.dom && !document.all)?1:0;
  123.       this.ie5 = (this.dom && document.all)?1:0;
  124.       this.ok = this.dom || this.ie4 || this.ns4;
  125.       this.platform = navigator.platform;
  126.     }
  127.     var browser = new Browser();
  128.  
  129.     // dom browsers require this written to the HEAD section
  130.  
  131.     if (browser.dom || browser.ie4){
  132.         document.writeln('<style>');
  133.         document.writeln('#container {');
  134.         document.writeln('position : absolute;');
  135.         document.writeln('left : 100px;');
  136.         document.writeln('top : 100px;');
  137.         document.writeln('width : 124px;');;
  138.         browser.platform=='Win32'?height=140:height=145;
  139.         document.writeln('height : ' + height +'px;');
  140.         document.writeln('clip:rect(0px 124px ' + height + 'px 0px);');
  141.         //document.writeln('overflow : hidden;');
  142.         document.writeln('visibility : hidden;');
  143.         document.writeln('background-color : #ffffff');
  144.         document.writeln('}');
  145.         document.writeln('</style>')
  146.         document.write('<div id="container"');
  147.         if (timeoutDelay) document.write(' onmouseout="calendarTimeout();" onmouseover="if (timeoutId) clearTimeout(timeoutId);"');
  148.         document.write('></div>');
  149.     }
  150.  
  151.     var g_Calendar;  // global to hold the calendar reference, set by constructor
  152.  
  153.     function calendarTimeout(){
  154.       if (browser.ie4 || browser.ie5){
  155.         if (window.event.srcElement && window.event.srcElement.name!='month') timeoutId=setTimeout('g_Calendar.hide();',timeoutDelay);
  156.       }
  157.       if (browser.ns6 || browser.ns4){
  158.         timeoutId=setTimeout('g_Calendar.hide();',timeoutDelay);
  159.       }
  160.     }
  161.  
  162.     // constructor for calendar class
  163.     function Calendar(){
  164.       g_Calendar = this;
  165.       // some constants needed throughout the program
  166.       this.daysOfWeek = new Array("Su","Mo","Tu","We","Th","Fr","Sa");
  167.       this.months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
  168.       this.daysInMonth = new Array(31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
  169.  
  170.       if (browser.ns4){
  171.         var tmpLayer = new Layer(127);
  172.         if (timeoutDelay){
  173.           tmpLayer.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
  174.           tmpLayer.onmouseover = function(event) { if (timeoutId) clearTimeout(timeoutId); };
  175.           tmpLayer.onmouseout = function(event) { timeoutId=setTimeout('g_Calendar.hide()',timeoutDelay);};
  176.         }
  177.         tmpLayer.x = 100;
  178.         tmpLayer.y = 100;
  179.         tmpLayer.bgColor = "#ffffff";
  180.       }
  181.       if (browser.dom || browser.ie4){
  182.         var tmpLayer = browser.dom?document.getElementById('container'):document.all.container;
  183.       }
  184.       this.containerLayer = tmpLayer;
  185.       if (browser.ns4 && browser.platform=='Win32') {
  186.         this.containerLayer.clip.height=134;
  187.         this.containerLayer.clip.width=127;
  188.       }
  189.  
  190.     }
  191.  
  192.      Calendar.prototype.getFirstDOM = function() {
  193.         var thedate = new Date();
  194.         thedate.setDate(1);
  195.         thedate.setMonth(this.month);
  196.         thedate.setFullYear(this.year);
  197.         return thedate.getDay();
  198.     }
  199.  
  200.     Calendar.prototype.getDaysInMonth = function (){
  201.        if (this.month!=1) {
  202.        return this.daysInMonth[this.month]
  203.        }
  204.        else {
  205.          // is it a leap year
  206.             if (Date.isLeapYear(this.year)) {
  207.               return 29;
  208.             }
  209.             else {
  210.               return 28;
  211.             }
  212.        }
  213.     }
  214.  
  215.     Calendar.prototype.buildString = function(){
  216.       var tmpStr = '<form onSubmit="this.year.blur();return false;"><table width="100%" border="0" cellspacing="0" cellpadding="2" class="calBorderColor"><tr><td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1" class="calBgColor">';
  217.       tmpStr += '<tr>';
  218.       tmpStr += '<td width="60%" class="cal" align="left">';
  219.       if (this.hasDropDown) {
  220.         tmpStr += '<select class="month" name="month" onchange="g_Calendar.selectChange();">';
  221.         for (var i=0;i<this.months.length;i++){
  222.           tmpStr += '<option value="' + i + '"' 
  223.           if (i == this.month) tmpStr += ' selected';
  224.           tmpStr += '>' + this.months[i] + '</option>';
  225.         }
  226.         tmpStr += '</select>';
  227.       } else {
  228.         tmpStr += '<table border="0" cellspacing="0" cellpadding="0"><tr><td><a href="javascript: g_Calendar.changeMonth(-1);"><img name="calendar" src="images/down.gif" width="8" height="12" border="0" alt=""></a></td><td class="cal" width="100%" align="center">' + this.months[this.month] + '</td><td class="cal"><a href="javascript: g_Calendar.changeMonth(+1);"><img name="calendar" src="images/up.gif" width="8" height="12" border="0" alt=""></a></td></tr></table>';
  229.       }
  230.       tmpStr += '</td>';
  231.       /* observation : for some reason if the below event is changed to 'onChange' rather than 'onBlur' it totally crashes IE (4 and 5)!
  232.       */
  233.       tmpStr += '<td width="40%" align="right" class="cal">';
  234.  
  235.       if (this.hasDropDown) { 
  236.         tmpStr += '<input class="year" type="text" size="';
  237.         // get round NS4 win32 lenght of year input problem
  238.         (browser.ns4 && browser.platform=='Win32')?tmpStr += 1:tmpStr += 4;
  239.       tmpStr += '" name="year" maxlength="4" onBlur="g_Calendar.inputChange();" value="' + this.year + '">';
  240.       } else {
  241.       tmpStr += '<table border="0" cellspacing="0" cellpadding="0"><tr><td class="cal"><a href="javascript: g_Calendar.changeYear(-1);"><img name="calendar" src="images/down.gif" width="8" height="12" border="0" alt=""></a></td><td class="cal" width="100%" align="center">' + this.year + '</td><td class="cal"><a href="javascript: g_Calendar.changeYear(+1);"><img name="calendar" src="images/up.gif" width="8" height="12" border="0" alt=""></a></td></tr></table>'
  242.       }
  243.       tmpStr += '</td>';
  244.       tmpStr += '</tr>';
  245.       tmpStr += '</table>';
  246.       var iCount = 1;
  247.  
  248.       var iFirstDOM = (7+this.getFirstDOM()-g_startDay)%7; // to prevent calling it in a loop
  249.  
  250.       var iDaysInMonth = this.getDaysInMonth(); // to prevent calling it in a loop
  251.  
  252.       tmpStr += '<table width="100%" border="0" cellspacing="0" cellpadding="1" class="calBgColor">';
  253.       tmpStr += '<tr>';
  254.         for (var i=0;i<7;i++){
  255.           tmpStr += '<td align="center" class="calDaysColor">' + this.daysOfWeek[(g_startDay+i)%7] + '</td>';
  256.         }
  257.       tmpStr += '</tr>';
  258.       var tmpFrom = parseInt('' + this.dateFromYear + this.dateFromMonth + this.dateFromDay,10);
  259.       var tmpTo = parseInt('' + this.dateToYear + this.dateToMonth + this.dateToDay,10);
  260.       var tmpCompare;
  261.       for (var j=1;j<=6;j++){
  262.          tmpStr += '<tr>';
  263.          for (var i=1;i<=7;i++){
  264.            tmpStr += '<td width="16" align="center" '
  265.            if ( (7*(j-1) + i)>=iFirstDOM+1  && iCount <= iDaysInMonth){
  266.              if (iCount==this.day && this.year==this.oYear && this.month==this.oMonth) tmpStr += 'class="calHighlightColor"';
  267.              else {
  268.                 if (i==7-g_startDay || i==((7-g_startDay)%7)+1) tmpStr += 'class="calWeekend"';
  269.                 else tmpStr += 'class="cal"';
  270.              }
  271.              tmpStr += '>';
  272.              /* could create a date object here and compare that but probably more efficient to convert to a number
  273.                and compare number as numbers are primitives */
  274.              tmpCompare = parseInt('' + this.year + padZero(this.month) + padZero(iCount),10);
  275.              if (tmpCompare >= tmpFrom && tmpCompare <= tmpTo) {
  276.                tmpStr += '<a class="cal" href="javascript: g_Calendar.clickDay(' + iCount + ');">' + iCount + '</a>';
  277.              } else {
  278.                tmpStr += '<span class="disabled">' + iCount + '</span>';
  279.              }
  280.              iCount++;
  281.            } else {
  282.              if  (i==7-g_startDay || i==((7-g_startDay)%7)+1) tmpStr += 'class="calWeekend"'; else tmpStr +='class="cal"';
  283.              tmpStr += '>&nbsp;';
  284.            }
  285.            tmpStr += '</td>'
  286.          }
  287.          tmpStr += '</tr>'
  288.       }
  289.       tmpStr += '</table></td></tr></table></form>'
  290.       return tmpStr;
  291.     }
  292.  
  293.     Calendar.prototype.selectChange = function(){
  294.       this.month = browser.ns6?this.containerLayer.ownerDocument.forms[0].month.selectedIndex:this.containerLayer.document.forms[0].month.selectedIndex;
  295.       this.writeString(this.buildString());
  296.     }
  297.  
  298.     Calendar.prototype.inputChange = function(){
  299.       var tmp = browser.ns6?this.containerLayer.ownerDocument.forms[0].year:this.containerLayer.document.forms[0].year;
  300.       if (tmp.value >=1900 || tmp.value <=2100){
  301.         this.year = tmp.value;
  302.         this.writeString(this.buildString());
  303.       } else {
  304.         tmp.value = this.year;
  305.       }
  306.     }
  307.     Calendar.prototype.changeYear = function(incr){
  308.        (incr==1)?this.year++:this.year--;
  309.        this.writeString(this.buildString());
  310.     }
  311.     Calendar.prototype.changeMonth = function(incr){
  312.         if (this.month==11 && incr==1){
  313.           this.month = 0;
  314.             this.year++;
  315.         } else {
  316.           if (this.month==0 && incr==-1){
  317.             this.month = 11;
  318.             this.year--;
  319.           } else {
  320.             (incr==1)?this.month++:this.month--;
  321.           }
  322.         }
  323.         this.writeString(this.buildString());
  324.     }
  325.  
  326.     Calendar.prototype.clickDay = function(day){
  327.        var tmp = eval('document.' + this.target);
  328.        tmp.value = this.formatDateAsString(day,this.month,this.year);
  329.         if (browser.ns4) this.containerLayer.hidden=true;
  330.         if (browser.dom || browser.ie4){
  331.           this.containerLayer.style.visibility='hidden';
  332.         }
  333.     }
  334.     Calendar.prototype.formatDateAsString = function(day, month, year){
  335.       var delim = eval('/\\' + this.dateDelim + '/g');
  336.        switch (this.dateFormat.replace(delim,"")){
  337.          case 'ddmmmyyyy': return padZero(day) + this.dateDelim + this.months[month].substr(0,3) + this.dateDelim + year;
  338.          case 'ddmmyyyy': return padZero(day) + this.dateDelim + padZero(month+1) + this.dateDelim + year;
  339.          case 'mmddyyyy': return padZero((month+1)) + this.dateDelim + padZero(day) + this.dateDelim + year;
  340.          case 'yyyymmdd': return year + this.dateDelim + padZero(month+1) + this.dateDelim + padZero(day);
  341.          default: alert('unsupported date format');
  342.        }
  343.     }
  344.     Calendar.prototype.writeString = function(str){
  345.       if (browser.ns4){
  346.         this.containerLayer.document.open();
  347.         this.containerLayer.document.write(str);
  348.         this.containerLayer.document.close();
  349.       } 
  350.       if (browser.dom || browser.ie4){
  351.         this.containerLayer.innerHTML = str;
  352.       }
  353.     }
  354.  
  355.     Calendar.prototype.show = function(event, target, bHasDropDown, dateFormat, dateFrom, dateTo){
  356.     // calendar can restrict choices between 2 dates, if however no restrictions
  357.     // are made, let them choose any date between 1900 and 3000
  358.     this.dateFrom = dateFrom || new Date(1900,0,1);
  359.     this.dateFromDay = padZero(this.dateFrom.getDate());
  360.     this.dateFromMonth = padZero(this.dateFrom.getMonth());
  361.     this.dateFromYear = this.dateFrom.getFullYear();
  362.     this.dateTo = dateTo || new Date(3000,0,1);
  363.     this.dateToDay = padZero(this.dateTo.getDate());
  364.     this.dateToMonth = padZero(this.dateTo.getMonth());
  365.     this.dateToYear = this.dateTo.getFullYear();
  366.     this.hasDropDown = bHasDropDown;
  367.     this.dateFormat = dateFormat || 'dd-mmm-yyyy';
  368.     switch (this.dateFormat){
  369.       case 'dd-mmm-yyyy':
  370.       case 'dd-mm-yyyy':
  371.       case 'yyyy-mm-dd':
  372.         this.dateDelim = '-';
  373.         break;
  374.       case 'dd/mm/yyyy':
  375.       case 'mm/dd/yyyy':
  376.       case 'dd/mmm/yyyy':
  377.         this.dateDelim = '/';
  378.         break;
  379.     }
  380.  
  381.       if (browser.ns4) {
  382.         if (!this.containerLayer.hidden) {
  383.           this.containerLayer.hidden=true;
  384.           return;
  385.         }
  386.        }
  387.       if (browser.dom || browser.ie4){
  388.         if (this.containerLayer.style.visibility=='visible') {
  389.           this.containerLayer.style.visibility='hidden';
  390.           return;
  391.         }  
  392.       }
  393.  
  394.       if (browser.ie5 || browser.ie4){
  395.         var event = window.event;
  396.       }
  397.       if (browser.ns4){
  398.         this.containerLayer.x = event.x+10;
  399.         this.containerLayer.y = event.y-5;
  400.       }
  401.       if (browser.ie5 || browser.ie4){
  402.         var obj = event.srcElement;
  403.          x = 0;
  404.           while (obj.offsetParent != null) {
  405.               x += obj.offsetLeft;
  406.               obj = obj.offsetParent;
  407.           }
  408.           x += obj.offsetLeft;
  409.         y = 0;
  410.         var obj = event.srcElement;
  411.         while (obj.offsetParent != null) {
  412.               y += obj.offsetTop;
  413.               obj = obj.offsetParent;
  414.           }
  415.           y += obj.offsetTop;
  416.  
  417.         this.containerLayer.style.left = x+35;
  418.         if (event.y>0)this.containerLayer.style.top = y;
  419.       }
  420.       if (browser.ns6){
  421.         this.containerLayer.style.left = event.pageX+10;
  422.         this.containerLayer.style.top = event.pageY-5;
  423.       }
  424.       this.target = target;
  425.       var tmp = eval('document.' + this.target);
  426.       if (tmp && tmp.value && tmp.value.split(this.dateDelim).length==3 && tmp.value.indexOf('d')==-1){
  427.         var atmp = tmp.value.split(this.dateDelim)
  428.         switch (this.dateFormat){
  429.          case 'dd-mmm-yyyy':
  430.          case 'dd/mmm/yyyy':
  431.            for (var i=0;i<this.months.length;i++){
  432.              if (atmp[1].toLowerCase()==this.months[i].substr(0,3).toLowerCase()){
  433.                this.month = this.oMonth = i;
  434.                break;
  435.              }
  436.            }
  437.            this.day = parseInt(atmp[0],10);
  438.            this.year = this.oYear = parseInt(atmp[2],10);
  439.            break;
  440.          case 'dd/mm/yyyy':
  441.          case 'dd-mm-yyyy':
  442.            this.month = this.oMonth = parseInt(atmp[1]-1,10); 
  443.            this.day = parseInt(atmp[0],10);
  444.            this.year = this.oYear = parseInt(atmp[2],10);
  445.            break;
  446.          case 'mm/dd/yyyy':
  447.          case 'mm-dd-yyyy':
  448.            this.month = this.oMonth = parseInt(atmp[0]-1,10);
  449.            this.day = parseInt(atmp[1],10);
  450.            this.year = this.oYear = parseInt(atmp[2],10);
  451.            break;
  452.          case 'yyyy-mm-dd':
  453.            this.month = this.oMonth = parseInt(atmp[1]-1,10);
  454.            this.day = parseInt(atmp[2],10);
  455.            this.year = this.oYear = parseInt(atmp[0],10);
  456.            break;
  457.         }
  458.       } else { // no date set, default to today
  459.         var theDate = new Date();
  460.            this.year = this.oYear = theDate.getFullYear();
  461.          this.month = this.oMonth = theDate.getMonth();
  462.          this.day = this.oDay = theDate.getDate();
  463.       }
  464.       this.writeString(this.buildString());
  465.  
  466.       // and then show it!
  467.        if (browser.ns4) {
  468.        this.containerLayer.hidden=false;
  469.        }
  470.       if (browser.dom || browser.ie4){
  471.           this.containerLayer.style.visibility='visible';
  472.       }
  473.     }
  474.  
  475.     Calendar.prototype.hide = function(){
  476.       if (browser.ns4) this.containerLayer.hidden = true;
  477.       if (browser.dom || browser.ie4){
  478.         this.containerLayer.style.visibility='hidden';
  479.       }
  480.     }
  481.  
  482.     function handleDocumentClick(e){
  483.       if (browser.ie4 || browser.ie5) e = window.event;
  484.  
  485.       if (browser.ns6){
  486.         var bTest = (e.pageX > parseInt(g_Calendar.containerLayer.style.left,10) && e.pageX <  (parseInt(g_Calendar.containerLayer.style.left,10)+125) && e.pageY < (parseInt(g_Calendar.containerLayer.style.top,10)+125) && e.pageY > parseInt(g_Calendar.containerLayer.style.top,10));
  487.         if (e.target.name!='imgCalendar' && e.target.name!='month'  && e.target.name!='year' && e.target.name!='calendar' && !bTest){
  488.           g_Calendar.hide(); 
  489.         }
  490.       }
  491.       if (browser.ie4 || browser.ie5){
  492.         // extra test to see if user clicked inside the calendar but not on a valid date, we don't want it to disappear in this case
  493.        var bTest = (e.x > parseInt(g_Calendar.containerLayer.style.left,10) && e.x <  (parseInt(g_Calendar.containerLayer.style.left,10)+125) && e.y < (parseInt(g_Calendar.containerLayer.style.top,10)+125) && e.y > parseInt(g_Calendar.containerLayer.style.top,10));
  494.         if (e.srcElement.name!='imgCalendar' && e.srcElement.name!='month' && e.srcElement.name!='year' && !bTest & typeof(e.srcElement)!='object'){
  495.           g_Calendar.hide(); 
  496.         }
  497.       }
  498.       if (browser.ns4) g_Calendar.hide();
  499.     }
  500.  
  501.     // utility function
  502.     function padZero(num) {
  503.       return ((num <= 9) ? ("0" + num) : num);
  504.     }
  505.       // Finally licked extending  native date object;
  506.       Date.isLeapYear = function(year){ if (year%4==0 && ((year%100!=0) || (year%400==0))) return true; else return false; }
  507.       Date.daysInYear = function(year){ if (Date.isLeapYear(year)) return 366; else return 365;}
  508.       var DAY = 1000*60*60*24;
  509.       Date.prototype.addDays = function(num){
  510.         return new Date((num*DAY)+this.valueOf());
  511.       }    
  512.  
  513.      // events capturing, careful you don't override this by setting something in the onload event of 
  514.     // the body tag
  515.     window.onload=function(){ 
  516.       new Calendar(new Date());
  517.       if (browser.ns4){
  518.         if (typeof document.NSfix == 'undefined'){
  519.           document.NSfix = new Object();
  520.           document.NSfix.initWidth=window.innerWidth;
  521.           document.NSfix.initHeight=window.innerHeight;
  522.         }
  523.       }
  524.     }
  525.     if (browser.ns4) window.onresize = function(){
  526.       if (document.NSfix.initWidth!=window.innerWidth || document.NSfix.initHeight!=window.innerHeight) window.location.reload(false);
  527.     } // ns4 resize bug workaround
  528.     window.document.onclick=handleDocumentClick;
  529.     window.onerror = function(msg,url,line){
  530.       alert('******* an error has occurred ********' +
  531.       '\n\nPlease check that' + 
  532.       '\n\n1)You have not added any code to the body onload event,'
  533.       +  '\nif you want to run something as well as the calendar initialisation'
  534.       + '\ncode, add it to the onload event in the calendar library.'
  535.       + '\n\n2)You have set the parameters correctly in the g_Calendar.show() method '
  536.       + '\n\nSee www.totallysmartit.com\\examples\\calendar\\simple.asp for examples'
  537.       + '\n\n------------------------------------------------------'
  538.       + '\nError details'
  539.       + '\nText:' + msg + '\nurl:' + url + '\nline:' + line);
  540.     }
  541.  
  542.     </script>
  543.     <style>
  544. #container {
  545. position : absolute;
  546. left : 100px;
  547. top : 100px;
  548. width : 124px;
  549. height : 140px;
  550. clip:rect(0px 124px 140px 0px);
  551. visibility : hidden;
  552. background-color : #ffffff
  553. }
  554.  
  555. </style>
  556.     <style>
  557.     td{
  558.       font-family : Arial,Helvetica,Sans-serif;
  559.       font-size : 12px;
  560.       color : #000000;
  561.     }
  562.     input{
  563.       font-family : Arial,Helvetica,Sans-serif;
  564.       font-size : 12px;
  565.       color : #000000;
  566.       width : 90px;
  567.     }
  568.     </style>
  569.  
  570.  
  571.  
  572. <div id="container" onmouseover="if (timeoutId) clearTimeout(timeoutId);" onmouseout="calendarTimeout();" style="visibility: hidden;"/></div>
  573.  
  574.  
  575.  
  576.  
  577.  
  578.  
  579. <table>
  580.  
  581. <TR>
  582. <th>Expected Close Date</th>
  583. <td><input type="text" name="closedate" size="11">
  584.           <a href="javascript: void(0);" onmouseover="if (timeoutId) clearTimeout(timeoutId);window.status='Show Calendar';return true;" onmouseout="if (timeoutDelay) calendarTimeout();window.status='';" onclick="g_Calendar.show(event,'frm.closedate', false, 'dd/mm/yyyy', new Date()); return false;"><img src="calendar/images/calendar.gif" name="imgCalendar" width="34" height="21" border="0" alt=""></a>
  585.  
  586. </td>
  587. </tr>
  588.  
  589. </form>
  590. </table>
  591.  
  592. </body>
  593.  
  594. </html>
  595.  
  596.  
Here in this code the calendar function is working perfectly but the drop down list is not working based on the code.

kindly somebody rectify this error
The calendar code and the dropdown code are working seperately whwn merged the dropdown is not working

kindly somebody rectify this error

Thanks in advance
Mar 20 '09 #7
acoder
16,027 Recognized Expert Moderator MVP
You have two main problems:
1. your body tag is in the wrong place
2. see lines 530-40: move the fillteam() call to the window.onload function on line 515+.

Your addOption() function is slightly incorrect, but we can deal with that later.
Mar 21 '09 #8
ahilar12
27 New Member
thanks the got the solution for the problem
Mar 25 '09 #9
acoder
16,027 Recognized Expert Moderator MVP
Glad you got it working.
Mar 28 '09 #10

Sign in to post your reply or Sign up for a free account.

Similar topics

3
2428
by: Alex Stevens | last post by:
I'd already posted this in microsoft.public.dotnet.framework.windowsforms and microsoft.public.dotnet.framework.windowsforms.controls to no avail so apologies for the cross-posting. Hi, I'm writing a usercontrol which displays the typical two listboxes and the ability to move items from one to the other. The listboxes are populated with my custom objects (SwapItem), which simply
0
2431
by: brent | last post by:
Hi there... I have a stateless Session Bean issuing a select for a BLOB column. This bean is using a CachedRowSet. It seems to work for all other columns types other than a BLOB. Selecting a BLOB column, a SQLExcpetion when the CachedRowSet is populated. Anyone else run in to this situation? ENV: WSAD 5.0.1 running on WIN2K or RH9 (WAS 5 Datasouce) DB2 UDB 8.1 FP 3 (client)
1
5667
by: Randy Harris | last post by:
I can easily select a row in a listbox with: Me.lstMyListBox = "Some Data" if "Some Data" is in a record in the bound column. Is there any way to select a record based on a column other than the bound column? Me.lstMyListBox.Column(1) = "Other Data" gets an error.
7
7066
by: Douglas Buchanan | last post by:
I cannot access certain column values of a list box using code. I have a list box 'lstPrv' populated by the query below. SELECT tblPrv.fkPrvID, lkpCat.CatNm, lkpSrv.SrvNm, lkpCat.pkCatID, lkpSrv.pkSrvID FROM (lkpCat INNER JOIN lkpSrv ON lkpCat.pkCatID = lkpSrv.fkCatID) INNER JOIN tblPrv ON lkpSrv.pkSrvID = tblPrv.fkSrvD These are the columns displayed tblPrv.fkPrvID, lkpCat.CatNm, lkpSrv.SrvNm, lkpCat.pkCatID,
1
5047
by: Alvey Sidecast | last post by:
This is probably embarrassingly simple, but I've been trawling through this ng for hours now and my brain hurts. I've got an unbound multi-column listbox (multi-select=none) whose rowsource is a query based on a combobox selection. After the selection is made from the combobox the listbox may, or may not, have records in it. If it doesn't, no problems, I've got; If Me.lbxContacts.ItemsSelected.Count = 0 Then
5
2308
by: ColinWard | last post by:
Is there any way to skip lines programatically within a listbox as there is in a textbox? I have a listbox on a form which gets populated with the attachments I want to send with an e-mail but they are all mashed together and ideally I would like to skip a line between each attachment. here is the code: For Each vrtSelectedItem In .SelectedItems LstAttachment.AddItem (vrtSelectedItem)
1
2010
by: Mike | last post by:
Hello, I have a ListBox on my webForm and would like to display some information when the user double-clicks on a ListBox's item. But I could not find any "doubleclick" event. How is it possible to add the event to the webcontrol? Or should I build one myself (if so, how?)? Thanks Mike
4
2094
by: Duncan Smith | last post by:
So far, the quikest way I have found to select all items in a list box is to turn off updates, set a wait cusror and then call SetSelected on each item (see below), but it's too slow when the control is populated with tens of thousands of items. Ideally the wait-cursor shouldn't be needed as I hadn't anticipated a select-all operation taking a noticeable amount of time. Has anyone found a way to make this appear instantaneous as it...
6
6099
by: binky | last post by:
Good afternoon folks, I have a performance question if anybody might have suggestions. Functionally, everything i'm about to describe works as intended. The only problem I'm having is speed. Assume: 1) Using MS Access 2003 in an ADP project, SQL Server 2000 Enterprise backend 2) Main form is populated by a stored procedure, which works flawlessly 3) There is a listbox on the form that will display matching records based on a key...
0
9957
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
9799
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
10771
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
0
10434
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
9593
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
7988
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
7143
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
5810
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
4633
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.