/    Sign up×
Community /Pin to ProfileBookmark

Changing content of a text input based on <select>

I have the following need. I have users entering an action that has been performed, so the date is always current or past, never future. I have a drop-down selection for day of the week, and text entry for date in the form “mm/dd/yyyy” in a text input. Both default to the current, gotten from the computer (server) at time of entry.

I would like that when the user selects a day of the week the date is changed to suit that selection, and always backward. Today is Saturday: if the user selects Thursday subtract 2 days, if he selects Sunday subtract 6 days, etc.

I am not even up to novice in javascript, so the following is probably pretty pathetic, and of course it doesn’t work. If somebody would be so kind as to sho me where I went wrong I would be delighted.

[CODE]
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
<html>
<head>
<title>Testing</title>
<Script Language=JavaScript>

var theForm = “”;

function DaysInFeb(year)
{
if (year < 0) year++;
year = year + 4800;

if ((year % 4) == 0)
{ if ((year % 100) == 0)
{ if ((year % 400) == 0)
return(29);
else return(28);
}
else return(29);
}
else return(28);
}

function DaysInMonth(month, year)
{
if(month == 2)
{ return DaysInFeb(year);
}
elseif(month == 4 || month == 6 || month == 9 || month == 11)
{ return(30);
}
else return(31);
}

function showNewDate(prvDay)
{
theForm = document.forms.FormOne;

dtArr = theForm.Date.value.split(“/”);
Cmth = dtArr[0];
Cday = dtArr[1];
Cyr = dtArr[2];
newDay = theform.Wkday.value;
chg = newDay – prvDay;
if (chg > 0)
{ chg = chg – 7;
}
Cday = Cday – chg;
if (Cday < 1)
{ if (Cmth == 1)
{ Cmth = 12;
Cyr–;
}
else Cmth–;

Cday = Cday + DaysInMonth(Cmth,Cyr);
}
if (Cmth < 10)
DateStr = “0”+Cmth+”/”;
else DateStr = Cmth+”/”

if (Cday < 10)
DateStr = DateStr+”/0″+Cday+”/”+Cyr;
else DateStr = DateStr+”/”+Cday+”/”+Cyr;
theForm.Date.value = DateStr;
}
</Script>
</head>
<body>
<center>
<form method=’post’ name=’FormOne’ action=’sx_inpassn.php’>
<table border=0 cellpadding=0 cellspacing=0>
<td>Day:</td><td>
<select name=’Wkday’style=’width:100px;’ onchange=’showNewDate(7);’>
<option value=1>Sunday</option>
<option value=2>Monday</option>
<option value=3>Tuesday</option>
<option value=4>Wednesday</option>
<option value=5>Thursday</option>
<option value=6>Friday</option>
<option value=7 selected>Saturday</option>
</select></td></tr>

<td>Date:</td><td>
<input type=text name=’Date’ style=’width:100px’ maxlength=10 value=’07/16/2005′>
</td></tr></table>
</form>
</center>
</body>
</html>
[/CODE]

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@Willy_DuittJul 17.2005 — Isn't fully tested but this should [i]duitt[/i]...

Firstly, change the name of your text input from [b]Date[/b] to something else...

[b]Date[/b] is a reserved word/object...

My example uses [color=red]theDate[/color]...

Secondly, if you are getting the current date from the server...

Add your serverside Date variable where indicated in [color=red]red[/color] below...

[i][size=1][color=blue]onchange="this.form['theDate'].value=new Date([color=red]ADD SERVERSIDE DATE VARIABLE HERE[/COLOR]).showPastDate(7-Number(this.value))"[/color][/size][/i]

<i>
</i>&lt;script type="text/javascript"&gt;
&lt;!--// Written By: [email protected] \;
Number.prototype.addPrefix = function(){
if(this &lt; 10){
return '0'+this;
} return this;
}

Date.prototype.showPastDate = function(days){
var date = new Date(this.getTime());
date.setDate(date.getDate()-days);
date = (date.getMonth()+1).addPrefix()+'/'+date.getDate().addPrefix()+'/'+date.getFullYear();
return date;
}
//--&gt;
&lt;/script&gt;

&lt;form method='post' name='FormOne' action='sx_inpassn.php'&gt;
&lt;table border=0 cellpadding=0 cellspacing=0&gt;
&lt;td&gt;Day:&lt;/td&gt;&lt;td&gt;
&lt;select name='Wkday'style='width:100px;'
[color=blue]onchange="this.form['theDate'].value=new Date().showPastDate(7-Number(this.value))"[/color]&gt;
&lt;option value=0&gt;Sunday&lt;/option&gt;
&lt;option value=1&gt;Monday&lt;/option&gt;
&lt;option value=2&gt;Tuesday&lt;/option&gt;
&lt;option value=3&gt;Wednesday&lt;/option&gt;
&lt;option value=4&gt;Thursday&lt;/option&gt;
&lt;option value=5&gt;Friday&lt;/option&gt;
&lt;option value=6 selected&gt;Saturday&lt;/option&gt;
&lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;

&lt;td&gt;Date:&lt;/td&gt;&lt;td&gt;
&lt;input type=text [color=red]name='theDate'[/color] style='width:100px' maxlength=10 value='07/16/2005'&gt;
&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
&lt;/form&gt;


.....Willy

[b]EDIT:[/b] Oh... Change your option values from [b]0-6[/b] NOT [b]1-7[/b] as the Date object counts days from zero ([i]zero is sunday[/i])...
Copy linkTweet thisAlerts:
@JayhawkauthorJul 18.2005 — Thanks, Willy, this looks great. There's another javascript working with that date field as well, and it needs for it to be named "Date", but I think I can alter that script to be compatible with yours. I'll go to work on this tomorrow, cuz I'm about wore out for today.

This is going to be really cool, though. My client will love it.

Bill
Copy linkTweet thisAlerts:
@Willy_DuittJul 18.2005 — Looking at it again...

It's probably going to need more work here:

showPastDate(7-Number(this.value))

I would assume something using the current getDay value to further compensate the varying days... something like this I suppose:

showPastDate(7-(Number(this.value)+new Date().getDay())

And changing the text input has nothing to do with my script...

Although I am prototyping the Date object... The use of [b]Date[/b] will cause you problems...

.....Willy
×

Success!

Help @Jayhawk 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.15,
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,
)...