/    Sign up×
Community /Pin to ProfileBookmark

Returning value to a field, simple quick help!

Copy linkTweet thisAlerts:
Mar 31.2007

Hi guys, I know almost nothing in JS, I wonder if some of you can help me with this simple issue. I really appreciate.

I have 3 select dropdown which need to populate the value of a field in the format [I]yyyy-mm-dd[/I]

<INPUT NAME=”date” VALUE=”[I]yeardropdown+monthdropdown+daydropdown[/I]“

<form action=”” name=”someform”>
<select id=”daydropdown”>
</select>
<select id=”monthdropdown”>
</select>
<select id=”yeardropdown”>
</select>

Not that the monthdropdown has format ‘Jan’,’Feb’,’Mar’,’Apr’´… but the filed needs to be numeric yyyy-mm-dd

Can anyone help me? Thank you a lot

/max

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@PadonakApr 01.2007 — is this what you need?

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Value to a field&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;style type="text/css"&gt;
&lt;!--
body{
color: #000;
background-color: #f8f8ff;
font-family: Verdana, Helvetica;
}
select{
width: 150px;
}
#calculator{
position: absolute;
top: 200px;
left: 0px;
width: 500px;
border: 1px dashed #000;
text-align: center;
padding: 10px 10px 10px 10px;
}
input.result{
text-align: center;
font-weight: bold;
width: 200px;
}
--&gt;
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="calculator"&gt;
&lt;form action="" name="someform"&gt;
&lt;input class="result" name="result" value="" /&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;select id="daydropdown" name="daydropdown" onchange="calculate('dd',this[selectedIndex].value)"&gt;&lt;option value="0"&gt;Select day&lt;/option&gt;&lt;/select&gt;
&lt;input type="hidden" id="dd" name="dd" value=""&gt;
&lt;select id="monthdropdown" name="monthdropdown" onchange="calculate('mm',this[selectedIndex].value)"&gt;&lt;option value="0"&gt;Select month&lt;/option&gt;&lt;/select&gt;
&lt;input type="hidden" id="mm" name="mm" value=""&gt;
&lt;select id="yeardropdown" name="yeardropdown" onchange="calculate('yy',this[selectedIndex].value)"&gt;&lt;option value="0"&gt;Select year&lt;/option&gt;&lt;/select&gt;
&lt;input type="hidden" id="yy" name="yy" value=""&gt;
&lt;br /&gt;&lt;br /&gt;
&lt;input type="reset" value="reset" onfocus="this.blur()" /&gt;
&lt;/form&gt;
&lt;/div&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
&lt;!--
document.getElementById("calculator").style.left = parseInt(document.body.clientWidth/2) - 250 + "px";

var frm = document.someform;
var spacer = " - ";

var months = new Array("January","February","March","April","May","June","July","August","September","October","November","December");

// creating day's options
for(var i = 1; i &lt; 32; i++){
var newElem = document.createElement("OPTION");
newElem.text = i;
newElem.value = i;
frm.daydropdown.options.add(newElem);
}
// creating month's options
for(var i = 0; i &lt; months.length; i++){
var newElem = document.createElement("OPTION");
newElem.text = months[i];
newElem.value = i + 1;
frm.monthdropdown.options.add(newElem);
}
// creating year's options
for(var i = 1971; i &lt; 2008; i++){
var newElem = document.createElement("OPTION");
newElem.text = i;
newElem.value = i;
frm.yeardropdown.options.add(newElem);
}

function calculate(k,n){
if(n &lt; 10){n = "0" + n;}
frm[k].value = n;
frm.result.value = frm.yy.value + spacer + frm.mm.value + spacer + frm.dd.value;
}

frm.onreset = function(){
frm.dd.value = "";
frm.mm.value = "";
frm.yy.value = "";
}

window.onload = function(){frm.reset();}

//--&gt;
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@mpace030authorApr 01.2007 — Hi, thanks!

Yes, but I need to included on below script as there is some date validation and I need to place the DD more than ones on the same page.

I need to populate the VALUE for the input field OUTBOUND and INBOUND (on the bottom) according to the dropdown STARTDATE and ENDDATE using format [I]2007-03-31[/I]



<script>

<!-- Begin By Answering The Following Questions //;

// IF THERE IS MORE THAN ONE FORM, WHAT IS THE NAME OF YOUR FORM? //;

var FORM = '0';

// HOW MANY OPTION YEARS WOULD YOU LIKE TO DISPLAY? //;

var YEARS = '2';

// WOULD YOU LIKE TO DISPLAY PREVIOUS YEARS? YES : NO //;

var PREVIOUS = 'NO';

// WOULD YOU LIKE THE OPTION MENU'S TO LOAD AND DISPLAY THE CURRENT DATE? YES : NO //;

var DISPLAY = 'YES';

// WOULD YOU LIKE TO UPDATE THE END DATE WHENEVER THE START DATE IS CHANGED? YES : NO //;

var UPDATE = 'YES';


//###########################################################################//;

//################### #################//;

//################### NO NEED TO EDIT BEYOND THIS POINT #################//;

//################### #################//;

//################### SCRIPT AUTHOR: Willy Duitt #################//;

//################### EMAIL: [email][email protected][/email] #################//;

//################### #################//;

//################### THIS SCRIPT MAY BE FREELY USED AS #################//;

//################### LONG AS THESE CREDITS REMAIN INTACT #################//;

//################### #################//;

//###########################################################################//;

// GET TODAYS DATE //;

var today = new Date();

var thisDay = today.getDate();

var thisMonth = today.getMonth();

var thisYear = today.getYear();

if(thisYear<2000){thisYear += 1900};


// FUNCTION TO ACCOUNT FOR DAYS IN MONTHES & LEAP YEAR //;

function setMonth(theMonth,theYear){

var numDays = 31;

if(theMonth=='Apr'||theMonth=='Jun'||theMonth=='Sep'||theMonth=='Nov'){

numDays = 30;

}

if(theMonth == 'Feb' && (theYear/4) == Math.floor(theYear/4)){

numDays = 29;

}

if(theMonth == 'Feb' && (theYear/4) != Math.floor(theYear/4)){

numDays = 28;

}

return numDays;

}


// FUNCTION TO CHANGE NUMBER OF DAYS IN MONTHS //;

function setDays(select){

var form = document.forms[FORM];

var selYear = form[select+'Year'];

var selMonth = form[select+'Month'];

var selDay = form[select+'Day'];

var theYear = selYear[selYear.selectedIndex].text;

var theMonth = selMonth[selMonth.selectedIndex].text;

var numDays = setMonth(theMonth,theYear);

var theDays = selDay.length;

if(theDays > numDays){
for (var i=0; i<(theDays-numDays); i++){
selDay.options[selDay.options.length-1] = null
}
}

if(numDays > theDays){
for(var i=0; i<(numDays-theDays); i++){
newOption = new Option(selDay.options.length+1);
selDay.add(newOption);
}
}
}


// FUNCTION TO WRITE DAYS OPTION MENU //;

function writeDays(){

var optDays = '';

for(var day=1; day<=31; day++){

optDays += '<OPTION value="'+day+'">';

optDays += day+'</OPTION>';

}

return optDays;

}


// FUNCTION TO WRITE MONTHES OPTION MENU //;

function writeMonthes(){

var optMonthes = '';

var theMonthes = new Array('Jan','Feb','Mar','Apr','May','Jun',

'Jul','Aug','Sep','Oct','Nov','Dec');

for(var month=0; month<theMonthes.length; month++){

optMonthes += '<OPTION value="'+theMonthes[month]+'">';

optMonthes += theMonthes[month]+'</OPTION>';

}

return optMonthes;

}


// FUNCTION TO WRITE YEARS OPTION MENU //;

function writeYears(){

var optYears = '';

if(PREVIOUS.toLowerCase() == 'yes'){

var theYears = thisYear-parseInt(YEARS/2);

}

else{var theYears = thisYear};


for(var year=0; year<YEARS; year++){

optYears += '<OPTION value="'+(theYears+year)+'">';

optYears += (theYears+year)+'</OPTION>';

}

return optYears;

}


// FUNCTION TO WRITE START DATE MENU //;

function startDate(){

var startDate = '<SELECT style="font:Arial, Helvetica, sans-serif; font-size:11px" name="startDay" onchange="upDate('start')">';

startDate+= writeDays();

startDate+= ' </SELECT>';

startDate+= '<SELECT style="font:Arial, Helvetica, sans-serif; font-size:11px" name="startMonth" onchange="upDate('start')">';

startDate+= writeMonthes();

startDate+= ' </SELECT>';

startDate+= '<SELECT style="font:Arial, Helvetica, sans-serif; font-size:11px" name="startYear" onchange="upDate('start')">';

startDate+= writeYears();

startDate+= ' </SELECT>';

document.write(startDate);

chkOptions('start');

}


// FUNCTION TO WRITE END DATE MENU //;

function endDate(){

var endDate = '<SELECT name="endDay" style="font:Arial, Helvetica, sans-serif; font-size:11px" onchange="upDate('end')">';

endDate+= writeDays();

endDate+= ' </SELECT>';

endDate+= '<SELECT name="endMonth" style="font:Arial, Helvetica, sans-serif; font-size:11px" onchange="upDate('end')">';

endDate+= writeMonthes();

endDate+= ' </SELECT>';

endDate+= '<SELECT name="endYear" style="font:Arial, Helvetica, sans-serif; font-size:11px" onchange="upDate('end')">';

endDate+= writeYears();

endDate+= ' </SELECT>';

document.write(endDate);

chkOptions('end');

}


// FUNCTION TO CHECK USER DEFINED OPTIONS //;

function chkOptions(select){

var form = document.forms[FORM];

if(DISPLAY.toLowerCase() == 'yes'){

if(PREVIOUS.toLowerCase() == 'yes'){

form[select+'Year'][parseInt(YEARS/2)].selected = true;

}

else{form[select+'Year'][0].selected = true};
form[select+'Month'][thisMonth].selected = true;
form[select+'Day'][thisDay-1].selected = true;
setDays(select);
}
}


// FUNCTION TO UPDATE END DATE OPTIONS WHEN START DATE CHANGES //;

function upDate(select){

var form = document.forms[FORM];

if(UPDATE.toLowerCase() == 'yes' && select == 'start'){

form.endYear.selectedIndex = form.startYear.selectedIndex;

form.endMonth.selectedIndex = form.startMonth.selectedIndex;

form.endDay.selectedIndex = form.startDay.selectedIndex;

setDays('start');

setDays('end');

}

else{
setDays(select);
}
}


// FUNCTION TO VALIDATE FORM INPUT DATES //;

function valiDate(){

var form = document.forms[FORM];

var startDate = form.startMonth.value+' ';

startDate+= form.startDay.value+' ';

startDate+= form.startYear.value;

var endDate = form.endMonth.value+' ';
endDate+= form.endDay.value+' ';
endDate+= form.endYear.value;

if(new Date(startDate)>new Date(endDate)){
alert("Not a Valid Date!nnPlease choose another end date.");
return false;
}

else{ return true };
}




// End -->

</script>

<a style="font-family: Arial, Helvetica, sans-serif; font-size:12px">Depart </a><br>

<script type="text/javascript">startDate()</script>

<br>

<a style="font-family: Arial, Helvetica, sans-serif; font-size:12px">Return </a><br>

<script type="text/javascript">endDate()</script>

<input TYPE="HIDDEN" name="Outbound" value="">

<INPUT TYPE="HIDDEN" NAME="Inbound" VALUE="">
Copy linkTweet thisAlerts:
@PadonakApr 01.2007 — i was just trying to answer the question given :-) im going to think about the new one
Copy linkTweet thisAlerts:
@mpace030authorApr 01.2007 — Thank you Padonak, I appreciate a lot.
×

Success!

Help @mpace030 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...