JavaScript - Select Html Control With Javascript? Need Help.

Dear all,

background information:
I did code a timesheet management system for my company with PHP where the user has to submit time entries and has an online form with several start and end times. The start and end times are all simple HTML select option dropdowns. I want that the first End time selection will be the next start time selection. Basically a simple dependency of the dropdown. My approach was that I want to solve this with JavaScript. In my php code I am echoing the following (in this select the end times are the values):

echo "<select class='normal' name='$field_id' onChange=set_time_hour(this.value,'$field_id_js')>";

When the user changes then the end time dropdown the next field (next start time entry) should be changed accordingly.

The javascript looks like this

function set_time_hour(hour_value,next_field){
alert (hour_value);
alert (next_field);
document.getElementById(next_field).value = hour_value;
}

The alert calls are giving me the right values. but the

document.getElementById(next_field).value = hour_value;

is not working. What is wrong there? Do you have an idea?

How can I change the value of a select box with Javascript?

The select box values are already popoluated with PHP so I just want to select the right value.

I have an ASP.Net page that uses functions in a .js file. I'm trying to reset the values in the controls on the form. The script I'm using works for Text boxes, TextArea boxes, and Check boxes, but, doesn't work for Select-One (DropDownList) or Select-Multi (List) controls. Included is the code.

I use the alert() call as troubleshooting to insure the code segment is entered and the control is identified. The SelectIndex of the control is not being set. When this code is hard coded on the page it works.

Code:

function ClearAllControls() {
                for (i = 0; i <= document.forms[0].length; i++) {
                    doc = document.forms[0].elements[i]; 
                    
                    switch (doc.type) {
                        case 'text':doc.value = ''; break;
                        case 'textarea':doc.value = ''; break;
                        case 'checkbox':doc.checked = false; break;
                        case 'select-one':
                            doc.selectedindex = 0;
                            alert(doc.name + " - " + doc.type)
                            break;
                        default:break;}
                     }
                    }

Hello friends...
i am working on the healthcare project.In which there are user interactive pages such as registration page,profile page.
In registration page to register the portal the birth date of user is required .
so i have added the calendar control using javascript.
I want that whenever user clicks on the calendar the birth date is displayed in the textfield.
but it cannot displayed the birth date...
So please tell me the sloution...

following is the code for calendar control

<p>
<meta content="text/html;" http-equiv="Content-Type" />
<style type="text/css">
#calender { width: 200px; font-family: ms sans serif, sans serif; font-size: 7pt; }
#calenderTable { border-style: outset; border-width: 2px; border-color: black; background-color: #EEE; display: none; position: absolute; z-index: 1; top: 0px; left: 0px; }
#calenderTableHead TR { background-color: #5FB404; }
#calenderTableDays TR { background-color: #B40404; color: #E6E6E6; }
.normalDay { border: 1px dotted black; cursor: pointer; }
.hlDay { border: 1px black; background-color: #585858; color: #E6E6E6; cursor: pointer; }
.toDay { border: 1px solid #E70; background-color: #FD8; color: #E70; font-weight: bold; cursor: pointer; }
.choosenDay { border: 1px #000000; background-color: #585858; color: #E6E6E6; font-weight: bold; cursor: pointer; }
</style>
<link rel="stylesheet" type="text/css" href="calendar.css" />
<script language="javaScript" type="text/javascript" src="calendar.js">
// Array of max days in month in a year and in a leap year
monthMaxDays = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
monthMaxDaysLeap= [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
hideSelectTags = [];
function getRealYear(dateObj)
{
return (dateObj.getYear() % 100) + (((dateObj.getYear() % 100) < 39) ? 2000 : 1900);
}
function getDaysPerMonth(month, year)
{
/* Check for leap year. These are some conditions to check year is leap year or not... 1.Years evenly divisible by four are normally leap years, except for... 2.Years also evenly divisible by 100 are not leap years, except for... 3.Years also evenly divisible by 400 are leap years. */
if ((year % 4) == 0)
{
if ((year % 100) == 0 && (year % 400) != 0)
return monthMaxDays[month];
return monthMaxDaysLeap[month];
}
else return monthMaxDays[month];
}

function createCalender(year, month, day)
{
// current Date
var curDate = new Date();
var curDay = curDate.getDate();
var curMonth = curDate.getMonth();
var curYear = getRealYear(curDate)
// if a date already exists, we calculate some values here
if (!year)
{
var year = curYear; var month = curMonth;
}
var yearFound = 0;
for (var i=0; i<document.getElementById('selectYear').options.length; i++)
{
if (document.getElementById('selectYear').options[i].value == year)
{
document.getElementById('selectYear').selectedIndex = i;
yearFound = true;
break;
}
}
if (!yearFound)
{
document.getElementById('selectYear').selectedIndex = 0;
year = document.getElementById('selectYear').options[0].value;
}
document.getElementById('selectMonth').selectedIndex = month;

// first day of the month.
var fristDayOfMonthObj = new Date(year, month, 1);
var firstDayOfMonth = fristDayOfMonthObj.getDay();
continu = true;
firstRow = true; var x = 0; var d = 0; var trs = [] var ti = 0;
while (d <= getDaysPerMonth(month, year))
{
if (firstRow)
{
trs[ti] = document.createElement("TR");
if (firstDayOfMonth > 0)
{
while (x < firstDayOfMonth)
{
trs[ti].appendChild(document.createElement("TD")); x++;
}
}
firstRow = false; var d = 1;
}

if (x % 7 == 0)
{
ti++; trs[ti] = document.createElement("TR");
}
if (day && d == day)
{
var setID = 'calenderChoosenDay';
var styleClass = 'choosenDay';
var setTitle = 'this day is currently selected';
}
else if (d == curDay && month == curMonth && year == curYear)
{
var setID = 'calenderToDay';
var styleClass = 'toDay';
var setTitle = 'this day today';
}
else
{
var setID = false; var styleClass = 'normalDay'; var setTitle = false;
}
var td = document.createElement("TD");
td.className = styleClass; if (setID)
{
td.id = setID;
}
if (setTitle)
{
td.title = setTitle;
}
td.onmouseover = new Function('highLiteDay(this)');
td.onmouseout = new Function('deHighLiteDay(this)');
if (targetEl)
td.onclick = new Function('pickDate('+year+', '+month+', '+d+')');
else td.style.cursor = 'default'; td.appendChild(document.createTextNode(d));
trs[ti].appendChild(td); x++; d++;
}
return trs;
}

function showCalender(elPos, tgtEl)
{
targetEl = false;
if (document.getElementById(tgtEl))
{
targetEl = document.getElementById(tgtEl);
}
else
{
if (document.forms[0].elements[tgtEl])
{
targetEl = document.forms[0].elements[tgtEl];
}
}
var calTable = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(elPos, positions);
calTable.style.left = positions[0]+'px';
calTable.style.top = positions[1]+'px';
calTable.style.display='block';
var matchDate = new RegExp('^([0-9]{2})-([0-9]{2})-([0-9]{4})$');
var m = matchDate.exec(targetEl.value);
if (m == null)
{
trs = createCalender(false, false, false);
showCalenderBody(trs);
}
else
{
if (m[1].substr(0, 1) == 0) m[1] = m[1].substr(1, 1);
if (m[2].substr(0, 1) == 0) m[2] = m[2].substr(1, 1); m[2] = m[2] - 1;
trs = createCalender(m[3], m[2], m[1]);
showCalenderBody(trs);
}
hideSelect(document.body, 1);
}

function showCalenderBody(trs)
{
var calTBody = document.getElementById('calender');
while (calTBody.childNodes[0])
{
calTBody.removeChild(calTBody.childNodes[0]);
}
for (var i in trs)
{
calTBody.appendChild(trs[i]);
}
}
function setYears(sy, ey)
{
// current Date
var curDate = new Date();
var curYear = getRealYear(curDate);
if (sy) startYear = curYear;
if (ey) endYear = curYear;
document.getElementById('selectYear').options.length = 0;
var j = 0;
for (y=ey; y>=sy; y--)
{
document.getElementById('selectYear')[j++] = new Option(y, y);
}
}
function hideSelect(el, superTotal)
{
if (superTotal >= 100) { return; }
var totalChilds = el.childNodes.length;
for (var c=0; c<totalChilds; c++)
{
var thisTag = el.childNodes[c];
if (thisTag.tagName == 'SELECT')
{
if (thisTag.id != 'selectMonth' && thisTag.id != 'selectYear')
{
var calenderEl = document.getElementById('calenderTable');
var positions = [0,0];
var positions = getParentOffset(thisTag, positions);
// nieuw
var thisLeft = positions[0];
var thisRight = positions[0] + thisTag.offsetWidth;
var thisTop = positions[1];
var thisBottom = positions[1] + thisTag.offsetHeight;
var calLeft = calenderEl.offsetLeft;
var calRight = calenderEl.offsetLeft + calenderEl.offsetWidth;
var calTop = calenderEl.offsetTop;
var calBottom = calenderEl.offsetTop + calenderEl.offsetHeight;
if ( ( /* check if it overlaps horizontally */ (thisLeft >= calLeft && thisLeft <= calRight) || (thisRight <= calRight && thisRight >= calLeft) || (thisLeft <= calLeft && thisRight >= calRight) ) && ( /* check if it overlaps vertically */ (thisTop >= calTop && thisTop <= calBottom) || (thisBottom <= calBottom && thisBottom >= calTop) || (thisTop <= calTop && thisBottom >= calBottom) ) )
{
hideSelectTags[hideSelectTags.length] = thisTag; Tag.style.display = 'none';
}
}
}
else if(thisTag.childNodes.length > 0)
{
hideSelect(thisTag, (superTotal+1));
}
}
}
function closeCalender()
{
for (var i=0; i<hideSelectTags.length; i++)
{
hideSelectTags[i].style.display = 'block';
}
hideSelectTags.length = 0;
document.getElementById('calenderTable').style.display='none';
}

function highLiteDay(el) { el.className = 'hlDay'; }
function deHighLiteDay(el)
{
if (el.id == 'calenderToDay') el.className = 'toDay';
else if (el.id == 'calenderChoosenDay') el.className = 'choosenDay';
else el.className = 'normalDay';
}

function pickDate(year, month, day)
{
month++;
day = day < 10 ? '0'+day : day;
month = month < 10 ? '0'+month : month;
if (!targetEl)
{
alert('target for date is not set yet');
}
else
{
targetEl.value= day+'-'+month+'-'+year; closeCalender();
}
}
function getParentOffset(el, positions)
{
positions[0] += el.offsetLeft; positions[1] += el.offsetTop; if (el.offsetParent) positions = getParentOffset(el.offsetParent, positions); return positions;
}
</script>
<link rel="stylesheet" type="text/css" href="calendar.css" /></p>
<form>
<input name="datum1" type="text" /><a onClick="setYears(1900, 2020); showCalender(this, 'datum1');" href="#"> <img alt="" width="17" height="13" src="/image/image_gallery?uuid=ad0e28d1-ae91-4535-a558-32d62a7df92e&amp;groupId=10136&amp;t=1294233035464" /></a>
</form>
<!-- Calender Script -->
<table id="calenderTable">
<tbody id="calenderTableHead">
<tr>
<td colspan="4" align="center"><select id="selectMonth" onChange="showCalenderBody(createCalender(document.getElementById('selectYear').value, this.selectedIndex, false));">
<option value="0" selected="selected">Jan</option>
<option value="1">Feb</option>
<option value="2">Mar</option>
<option value="3">Apr</option>
<option value="4">May</option>
<option value="5">Jun</option>
<option value="6">Jul</option>
<option value="7">Aug</option>
<option value="8">Sep</option>
<option value="9">Oct</option>
<option value="10">Nov</option>
<option value="11">Dec</option>
</select></td>
<td colspan="2" align="center"><select id="selectYear" onChange="showCalenderBody(createCalender(this.value, document.getElementById('selectMonth').selectedIndex, false));"></select></td>
<td align="center"><a onClick="closeCalender();" href="#"><font color="#003333" size="+1">X</font></a></td>
</tr>
</tbody>
<tbody id="calenderTableDays">
<tr>
<td>Sun</td>
<td>Mon</td>
<td>Tue</td>
<td>Wed</td>
<td>Thu</td>
<td>Fri</td>
<td>Sat</td>
</tr>
</tbody>
<tbody id="calender">
</tbody>
</table>
<!-- End Calender Script -->

Thanking you...

All,
I have some code on my page which changes images in a div without reloading the page. This works great, however my problem comes with I go through a couple images and the actual URL is still on the original image. Is there any way to change the URL when I click the image as well??

Thanks in advance.

Hi,

Ok i want to do the following...

I am using blogger and I have thousands of posts and each post topic has a specific image assigned to it but every now and then I like to change the image that is being displayed but then I have to go through thousands of posts to change the image URL and this takes super long to complete.

I thought of an idea of using Javascript to control this so I need your help please..

I want to be able to have a JS that I can insert the URL's of each image required for the posts and assign an ID like a number or a name to them, then have a seperate JS script that I can insert in ALL my posts and assign the same number to each related post relating to the image ID...

So if I need to change images then all I need to do is change the URL in the Javascript and it affects all the posts that contain this image... hope this makes sense..

Please help

Thank you.


I have seen code like this but it only randomizes the images but is the same concept, perhaps someone can just alter this code for me please...

[CODE]
<head>
<script language="JavaScript">
<!--
var theImages = new Array()

theImages[0] = 'http://lh5.ggpht.com/_MAclvGBXzj4/TEtvnlxvvrI/AAAAAAAABQw/N7UVoBvtjxU/s320/video34.png'
theImages[1] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEIZlr5FE6I/AAAAAAAABKU/LoBdw7Kqf3w/s200/Inside-blogger-256.png'
theImages[2] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TCHDY788QaI/AAAAAAAAAAU/SnWr-NP0dqE/s200/news.png'
theImages[3] = 'http://3.bp.blogspot.com/_MAclvGBXzj4/TEwgs_hhcXI/AAAAAAAABQ4/JTX1mzmdQLU/s200/croatia-flag.GIF'
theImages[4] = 'http://lh6.ggpht.com/_MAclvGBXzj4/TEtzAvpIEQI/AAAAAAAABQ0/RiLAfiUsCiA/s320/warning23.png'

var j = 0
var p = theImages.length;

var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}

var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//-->
</script>
</head>

<body>

<script language="JavaScript">
<!--
showImage();
</script>

</body>
[CODE]