srimca
02-02-2003, 11:18 PM
how to add items in a combo box in form load event using javascript
Click to See Complete Forum and Search --> : adding items in combo box
khalidali63
02-03-2003, 12:19 AM
document.formName.listBoxName[index].text = textvalue
document.formName.listBoxName[index].value = value
this is one way of doing it..you can use DOM as well to be more neat.
cheers
Khalid
document.formName.listBoxName[index].value = value
this is one way of doing it..you can use DOM as well to be more neat.
cheers
Khalid
srimca
02-03-2003, 01:10 AM
i want it for combo box.
the soln which u gave is not working.
i want the items to be inserted in the combo box during runtime.
the soln which u gave is not working.
i want the items to be inserted in the combo box during runtime.
khalidali63
02-03-2003, 07:41 AM
Your terminology is confusing.Are you talkingb about VB form objects or html selection object?
IOf you are talking about the later,,then please make sure that you understood the solution I posted above,because it does work( ofcourse its one way of doing it).
cheers
Khalid
IOf you are talking about the later,,then please make sure that you understood the solution I posted above,because it does work( ofcourse its one way of doing it).
cheers
Khalid
srimca
02-03-2003, 10:41 PM
ok.i will make it clear as to what i need.
i want a date combo box to insert days 1 to 31.i tried usin javascript.but its not working for me.
for(int i=1;i<32;i++)
{
formname.comboxname.addvalue(i);
}
i am not sure abt the 'addvalue' method..
thanx
i want a date combo box to insert days 1 to 31.i tried usin javascript.but its not working for me.
for(int i=1;i<32;i++)
{
formname.comboxname.addvalue(i);
}
i am not sure abt the 'addvalue' method..
thanx
bobyMaxilon
12-29-2004, 09:03 AM
OK
I understand what do you whant... Follow below steps:
<html>
<head>
<title>adding items in combo box</title>
<script language="javascript">
<!--
function addToCombo(){
var objForm = document.form01
var objNewOption = document.createElement("OPTION");
objForm.D1.options.add(objNewOption);
objNewOption.innerText = document.form01.T1.value;
objNewOption.Value = document.form01.T2.value;
}
-->
</script>
</head>
<body>
<form name="form01">
<p><select size="1" name="D1">
<option value="1">aaaaaaaaaaaaaaaa</option>
<option value="2">bbbbbbbbbbbbbbbbb</option>
<option value="3">ccccccccccccccccccccc</option>
</select></p>
<p>Name:<input type="text" name="T1" size="20"></p>
<p>Value:<input type="text" name="T2" size="20">
<input type="button" value="Button" name="B1" onclick="addToCombo()"></p>
</form>
</body>
</html>
I understand what do you whant... Follow below steps:
<html>
<head>
<title>adding items in combo box</title>
<script language="javascript">
<!--
function addToCombo(){
var objForm = document.form01
var objNewOption = document.createElement("OPTION");
objForm.D1.options.add(objNewOption);
objNewOption.innerText = document.form01.T1.value;
objNewOption.Value = document.form01.T2.value;
}
-->
</script>
</head>
<body>
<form name="form01">
<p><select size="1" name="D1">
<option value="1">aaaaaaaaaaaaaaaa</option>
<option value="2">bbbbbbbbbbbbbbbbb</option>
<option value="3">ccccccccccccccccccccc</option>
</select></p>
<p>Name:<input type="text" name="T1" size="20"></p>
<p>Value:<input type="text" name="T2" size="20">
<input type="button" value="Button" name="B1" onclick="addToCombo()"></p>
</form>
</body>
</html>
pj59
12-29-2004, 09:29 AM
Hello!
bobyMaxilon, your suggestion is one of quite a number of approaches. But please be aware that it will not work in Mozilla. By changing only two lines of your code, Mozilla would be satisfied too.
To achieve that, these lines:
objNewOption.innerText = document.form01.T1.value;
objNewOption.Value = document.form01.T2.value;
should be modified like this:
objNewOption.text = document.form01.T1.value;
objNewOption.value = document.form01.T2.value;
Regards PJ
bobyMaxilon, your suggestion is one of quite a number of approaches. But please be aware that it will not work in Mozilla. By changing only two lines of your code, Mozilla would be satisfied too.
To achieve that, these lines:
objNewOption.innerText = document.form01.T1.value;
objNewOption.Value = document.form01.T2.value;
should be modified like this:
objNewOption.text = document.form01.T1.value;
objNewOption.value = document.form01.T2.value;
Regards PJ
Warren86
12-29-2004, 10:40 AM
<HTML>
<Head>
<Script Language=JavaScript>
var nStart = 0;
var nEnd = 0;
function setDateLimit(isForm,isList,nDays){
prevLimit = isForm[isList].length;
currLimit = nDays;
if (currLimit < prevLimit)
{isForm[isList].length = currLimit}
else {
nOptions = currLimit-prevLimit
for (i=1; i<nOptions+1; i++)
{
isText = (prevLimit+i).toString();
insertDates(isForm[isList],isText,isText);
}
}
isForm[isList].selectedIndex = 0;
checkLeap(isForm,isList)
}
function insertDates(isList,isValue,isText){
isData = new Option(isText,isValue);
isList.add(isData,isList.options.length);
}
function checkLeap(isForm,isList){
if (/start/.test(isList))
{
isYear = isForm.startYears.value;
useList = "startMonths"
}
else {
isYear = isForm.endYears.value
useList = "endMonths"
}
if (isYear % 4 == 0 && isForm[useList].value == '28')
{
isData = new Option(29,29)
isForm[isList].add(isData,isForm[isList].options.length)
}
}
function resetBoth(isForm,isMonths,isDates){
isForm[isMonths].selectedIndex = 0;
isForm[isDates].options.length = 0;
for (i=1; i<32; i++)
{
insertDates(isForm[isDates],i,i)
}
}
function calcJulian(isDate){
gregDate = new Date(isDate);
year = gregDate.getFullYear();
month = gregDate.getMonth()+1;
day = gregDate.getDate();
A = Math.floor((7*(year+Math.floor((month+9)/12)))/4);
B = day+Math.floor((275*month)/9)
isJulian = (367*year)-A+B+1721014;
return isJulian
}
function calcGregorian(isDate) {
X = parseInt(isDate);
Y = Math.floor((X-1867216.25)/36524.25);
A = X+1+Y-Math.floor(Y/4);
B = A+1524;
C = Math.floor((B-122.1)/365.25);
D = Math.floor(365.25*C);
E = Math.floor((B-D)/30.6001);
month = (E<13.5) ? (E-1) : (E-13);
year = (month<2.5) ? (C-4715) : (C-4716);
day = Math.floor(B-D-Math.floor(30.6001*E));
isGregorian = month+"/"+day+"/"+year
return isGregorian;
}
function clipDates(isForm,isMonth,isList){
nDates = isForm[isMonth].value;
if (nDates == '30')
{isForm[isList].options.length = 30}
if (nDates == '28')
{isForm[isList].options.length = 28}
if (isForm.startYears.value % 4 == 0 && isForm[isMonth].value == '28')
{
isData = new Option(29,29)
isForm[isList].add(isData,isForm[isList].options.length)
}
}
function init(){
isToday = new Date();
nStart = calcJulian(isToday);
isStart = calcGregorian(nStart);
isStart = isStart.split("/");
listSet.startMonths.selectedIndex = isStart[0]-1;
listSet.startDates.selectedIndex = isStart[1]-1;
yearOffset = isStart[2]-2004;
listSet.startYears.selectedIndex = yearOffset;
nEnd = nStart+1;
isEnd = calcGregorian(nEnd);
isEnd = isEnd.split("/");
listSet.endMonths.selectedIndex = isEnd[0]-1;
listSet.endDates.selectedIndex = isEnd[1]-1
yearOffset = isEnd[2]-2004;
listSet.endYears.selectedIndex = yearOffset;
clipDates(listSet,'startMonths','startDates')
clipDates(listSet,'endMonths','endDates');
}
function validate(isForm){
isValid = true;
startStr = isForm.startMonths.selectedIndex+1+"/";
startStr += isForm.startDates.value+"/";
startStr += isForm.startYears.value;
isStart = calcJulian(startStr);
if (isStart < nStart)
{
alert('Invalid Start Date');
isValid = false;
}
if (isValid)
{
endStr = isForm.endMonths.selectedIndex+1+"/";
endStr += isForm.endDates.value+"/";
endStr += isForm.endYears.value;
isEnd = calcJulian(endStr)
if (isEnd <= isStart)
{
alert('Invalid End Date');
isValid = false;
}
}
if (isValid)
{
alert(startStr+" --- "+endStr)
isForm.startDate.value = startStr;
isForm.endDate.value = endStr;
// isForm.submit();
}
if (!isValid){init()}
}
window.onload=init;
</Script>
</Head>
<Body>
<br>
<form name='listSet' method='post' action=''>
<Table align='center' cellspacing='0'cellpadding='5' style='font-size:14pt;border:solid black 1px;background-color:lightyellow'>
<Thead><TH colspan='4' bgcolor='lightblue'> Selected Dates </TH></Thead>
<TR><TD>Start Date: </TD>
<TD><select name='startMonths' onchange="setDateLimit(this.form,'startDates',this.value)">
<option selected value='31'> January </option>
<option value='28'> February </option>
<option value='31'> March </option>
<option value='30'> April </option>
<option value='31'> May </option>
<option value='30'> June </option>
<option value='31'> July </option>
<option value='31'> August </option>
<option value='30'> September </option>
<option value='31'> October </option>
<option value='30'> November </option>
<option value='31'> December </option>
</select></TD>
<TD><select name='startDates'>
<option selected value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
<option value='6'> 6 </option>
<option value='7'> 7 </option>
<option value='8'> 8 </option>
<option value='9'> 9 </option>
<option value='10'> 10 </option>
<option value='11'> 11 </option>
<option value='12'> 12 </option>
<option value='13'> 13 </option>
<option value='14'> 14 </option>
<option value='15'> 15 </option>
<option value='16'> 16 </option>
<option value='17'> 17 </option>
<option value='18'> 18 </option>
<option value='19'> 19 </option>
<option value='20'> 20 </option>
<option value='21'> 21 </option>
<option value='22'> 22 </option>
<option value='23'> 23 </option>
<option value='24'> 24 </option>
<option value='25'> 25 </option>
<option value='26'> 26 </option>
<option value='27'> 27 </option>
<option value='28'> 28 </option>
<option value='29'> 29 </option>
<option value='30'> 30 </option>
<option value='31'> 31 </option>
</select></TD>
<TD><select name='startYears' onChange="resetBoth(this.form,'startMonths','startDates')">
<option selected value='2004'> 2004 </option>
<option value='2005'> 2005 </option>
<option value='2006'> 2006 </option>
<option value='2007'> 2007 </option>
<option value='2008'> 2008 </option>
<option value='2009'> 2009 </option>
</select></TD>
</TR>
<TR>
<TD>End Date: </TD>
<TD><select name='endMonths' onchange="setDateLimit(this.form,'endDates',this.value)">
<option selected value='31'> January </option>
<option value='28'> February </option>
<option value='31'> March </option>
<option value='30'> April </option>
<option value='31'> May </option>
<option value='30'> June </option>
<option value='31'> July </option>
<option value='31'> August </option>
<option value='30'> September </option>
<option value='31'> October </option>
<option value='30'> November </option>
<option value='31'> December </option>
</select></TD>
<TD><select name='endDates'>
<option selected value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
<option value='6'> 6 </option>
<option value='7'> 7 </option>
<option value='8'> 8 </option>
<option value='9'> 9 </option>
<option value='10'> 10 </option>
<option value='11'> 11 </option>
<option value='12'> 12 </option>
<option value='13'> 13 </option>
<option value='14'> 14 </option>
<option value='15'> 15 </option>
<option value='16'> 16 </option>
<option value='17'> 17 </option>
<option value='18'> 18 </option>
<option value='19'> 19 </option>
<option value='20'> 20 </option>
<option value='21'> 21 </option>
<option value='22'> 22 </option>
<option value='23'> 23 </option>
<option value='24'> 24 </option>
<option value='25'> 25 </option>
<option value='26'> 26 </option>
<option value='27'> 27 </option>
<option value='28'> 28 </option>
<option value='29'> 29 </option>
<option value='30'> 30 </option>
<option value='31'> 31 </option>
</select></TD>
<TD><select name='endYears' onChange="resetBoth(this.form,'endMonths','endDates')">
<option selected value='2004'> 2004 </option>
<option value='2005'> 2005 </option>
<option value='2006'> 2006 </option>
<option value='2007'> 2007 </option>
<option value='2008'> 2008 </option>
<option value='2009'> 2009 </option>
</select></TD>
</TR>
<TR>
<TD colspan='4' align='center' style='border-top:solid black 1px;background-color:moccasin'><input type=button value="Validate" onclick="validate(this.form)"></TD>
</TR>
</Table>
<input type=hidden name='startDate'>
<input type=hidden name='endDate'>
</form>
<p> Start Date defaults to current date, End Date defaults to tomorrow. Start Date must not be earlier than today, End Date must be later than Start Date.</p.
</Body>
</HTML>
<Head>
<Script Language=JavaScript>
var nStart = 0;
var nEnd = 0;
function setDateLimit(isForm,isList,nDays){
prevLimit = isForm[isList].length;
currLimit = nDays;
if (currLimit < prevLimit)
{isForm[isList].length = currLimit}
else {
nOptions = currLimit-prevLimit
for (i=1; i<nOptions+1; i++)
{
isText = (prevLimit+i).toString();
insertDates(isForm[isList],isText,isText);
}
}
isForm[isList].selectedIndex = 0;
checkLeap(isForm,isList)
}
function insertDates(isList,isValue,isText){
isData = new Option(isText,isValue);
isList.add(isData,isList.options.length);
}
function checkLeap(isForm,isList){
if (/start/.test(isList))
{
isYear = isForm.startYears.value;
useList = "startMonths"
}
else {
isYear = isForm.endYears.value
useList = "endMonths"
}
if (isYear % 4 == 0 && isForm[useList].value == '28')
{
isData = new Option(29,29)
isForm[isList].add(isData,isForm[isList].options.length)
}
}
function resetBoth(isForm,isMonths,isDates){
isForm[isMonths].selectedIndex = 0;
isForm[isDates].options.length = 0;
for (i=1; i<32; i++)
{
insertDates(isForm[isDates],i,i)
}
}
function calcJulian(isDate){
gregDate = new Date(isDate);
year = gregDate.getFullYear();
month = gregDate.getMonth()+1;
day = gregDate.getDate();
A = Math.floor((7*(year+Math.floor((month+9)/12)))/4);
B = day+Math.floor((275*month)/9)
isJulian = (367*year)-A+B+1721014;
return isJulian
}
function calcGregorian(isDate) {
X = parseInt(isDate);
Y = Math.floor((X-1867216.25)/36524.25);
A = X+1+Y-Math.floor(Y/4);
B = A+1524;
C = Math.floor((B-122.1)/365.25);
D = Math.floor(365.25*C);
E = Math.floor((B-D)/30.6001);
month = (E<13.5) ? (E-1) : (E-13);
year = (month<2.5) ? (C-4715) : (C-4716);
day = Math.floor(B-D-Math.floor(30.6001*E));
isGregorian = month+"/"+day+"/"+year
return isGregorian;
}
function clipDates(isForm,isMonth,isList){
nDates = isForm[isMonth].value;
if (nDates == '30')
{isForm[isList].options.length = 30}
if (nDates == '28')
{isForm[isList].options.length = 28}
if (isForm.startYears.value % 4 == 0 && isForm[isMonth].value == '28')
{
isData = new Option(29,29)
isForm[isList].add(isData,isForm[isList].options.length)
}
}
function init(){
isToday = new Date();
nStart = calcJulian(isToday);
isStart = calcGregorian(nStart);
isStart = isStart.split("/");
listSet.startMonths.selectedIndex = isStart[0]-1;
listSet.startDates.selectedIndex = isStart[1]-1;
yearOffset = isStart[2]-2004;
listSet.startYears.selectedIndex = yearOffset;
nEnd = nStart+1;
isEnd = calcGregorian(nEnd);
isEnd = isEnd.split("/");
listSet.endMonths.selectedIndex = isEnd[0]-1;
listSet.endDates.selectedIndex = isEnd[1]-1
yearOffset = isEnd[2]-2004;
listSet.endYears.selectedIndex = yearOffset;
clipDates(listSet,'startMonths','startDates')
clipDates(listSet,'endMonths','endDates');
}
function validate(isForm){
isValid = true;
startStr = isForm.startMonths.selectedIndex+1+"/";
startStr += isForm.startDates.value+"/";
startStr += isForm.startYears.value;
isStart = calcJulian(startStr);
if (isStart < nStart)
{
alert('Invalid Start Date');
isValid = false;
}
if (isValid)
{
endStr = isForm.endMonths.selectedIndex+1+"/";
endStr += isForm.endDates.value+"/";
endStr += isForm.endYears.value;
isEnd = calcJulian(endStr)
if (isEnd <= isStart)
{
alert('Invalid End Date');
isValid = false;
}
}
if (isValid)
{
alert(startStr+" --- "+endStr)
isForm.startDate.value = startStr;
isForm.endDate.value = endStr;
// isForm.submit();
}
if (!isValid){init()}
}
window.onload=init;
</Script>
</Head>
<Body>
<br>
<form name='listSet' method='post' action=''>
<Table align='center' cellspacing='0'cellpadding='5' style='font-size:14pt;border:solid black 1px;background-color:lightyellow'>
<Thead><TH colspan='4' bgcolor='lightblue'> Selected Dates </TH></Thead>
<TR><TD>Start Date: </TD>
<TD><select name='startMonths' onchange="setDateLimit(this.form,'startDates',this.value)">
<option selected value='31'> January </option>
<option value='28'> February </option>
<option value='31'> March </option>
<option value='30'> April </option>
<option value='31'> May </option>
<option value='30'> June </option>
<option value='31'> July </option>
<option value='31'> August </option>
<option value='30'> September </option>
<option value='31'> October </option>
<option value='30'> November </option>
<option value='31'> December </option>
</select></TD>
<TD><select name='startDates'>
<option selected value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
<option value='6'> 6 </option>
<option value='7'> 7 </option>
<option value='8'> 8 </option>
<option value='9'> 9 </option>
<option value='10'> 10 </option>
<option value='11'> 11 </option>
<option value='12'> 12 </option>
<option value='13'> 13 </option>
<option value='14'> 14 </option>
<option value='15'> 15 </option>
<option value='16'> 16 </option>
<option value='17'> 17 </option>
<option value='18'> 18 </option>
<option value='19'> 19 </option>
<option value='20'> 20 </option>
<option value='21'> 21 </option>
<option value='22'> 22 </option>
<option value='23'> 23 </option>
<option value='24'> 24 </option>
<option value='25'> 25 </option>
<option value='26'> 26 </option>
<option value='27'> 27 </option>
<option value='28'> 28 </option>
<option value='29'> 29 </option>
<option value='30'> 30 </option>
<option value='31'> 31 </option>
</select></TD>
<TD><select name='startYears' onChange="resetBoth(this.form,'startMonths','startDates')">
<option selected value='2004'> 2004 </option>
<option value='2005'> 2005 </option>
<option value='2006'> 2006 </option>
<option value='2007'> 2007 </option>
<option value='2008'> 2008 </option>
<option value='2009'> 2009 </option>
</select></TD>
</TR>
<TR>
<TD>End Date: </TD>
<TD><select name='endMonths' onchange="setDateLimit(this.form,'endDates',this.value)">
<option selected value='31'> January </option>
<option value='28'> February </option>
<option value='31'> March </option>
<option value='30'> April </option>
<option value='31'> May </option>
<option value='30'> June </option>
<option value='31'> July </option>
<option value='31'> August </option>
<option value='30'> September </option>
<option value='31'> October </option>
<option value='30'> November </option>
<option value='31'> December </option>
</select></TD>
<TD><select name='endDates'>
<option selected value='1'> 1 </option>
<option value='2'> 2 </option>
<option value='3'> 3 </option>
<option value='4'> 4 </option>
<option value='5'> 5 </option>
<option value='6'> 6 </option>
<option value='7'> 7 </option>
<option value='8'> 8 </option>
<option value='9'> 9 </option>
<option value='10'> 10 </option>
<option value='11'> 11 </option>
<option value='12'> 12 </option>
<option value='13'> 13 </option>
<option value='14'> 14 </option>
<option value='15'> 15 </option>
<option value='16'> 16 </option>
<option value='17'> 17 </option>
<option value='18'> 18 </option>
<option value='19'> 19 </option>
<option value='20'> 20 </option>
<option value='21'> 21 </option>
<option value='22'> 22 </option>
<option value='23'> 23 </option>
<option value='24'> 24 </option>
<option value='25'> 25 </option>
<option value='26'> 26 </option>
<option value='27'> 27 </option>
<option value='28'> 28 </option>
<option value='29'> 29 </option>
<option value='30'> 30 </option>
<option value='31'> 31 </option>
</select></TD>
<TD><select name='endYears' onChange="resetBoth(this.form,'endMonths','endDates')">
<option selected value='2004'> 2004 </option>
<option value='2005'> 2005 </option>
<option value='2006'> 2006 </option>
<option value='2007'> 2007 </option>
<option value='2008'> 2008 </option>
<option value='2009'> 2009 </option>
</select></TD>
</TR>
<TR>
<TD colspan='4' align='center' style='border-top:solid black 1px;background-color:moccasin'><input type=button value="Validate" onclick="validate(this.form)"></TD>
</TR>
</Table>
<input type=hidden name='startDate'>
<input type=hidden name='endDate'>
</form>
<p> Start Date defaults to current date, End Date defaults to tomorrow. Start Date must not be earlier than today, End Date must be later than Start Date.</p.
</Body>
</HTML>
pj59
12-29-2004, 10:51 AM
Hi!
Why not make your code at least Mozilla compatible, Warren86? And why not modify it so that, once a month other than January has been selected and the year will be changed afterwards, the month will remain the same? Stuff like that is available in these forums from quite a number of members.
PJ
Why not make your code at least Mozilla compatible, Warren86? And why not modify it so that, once a month other than January has been selected and the year will be changed afterwards, the month will remain the same? Stuff like that is available in these forums from quite a number of members.
PJ
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.
Copyright Internet.com Inc., All Rights Reserved.