/    Sign up×
Community /Pin to ProfileBookmark

Date Warning Real Time Update

Copy linkTweet thisAlerts:
Apr 16.2009

I currently have a form which our clients complete online for design requests for our office. We want the deadline they set to be longer than three days from the current submission day. What I want to be able to do on the form is when they use the drop down boxes to set the deadline date, if it is within three days of the current date, to make a red message under the boxes stating they need to call our office to verify this time frame. How can I do this and would ASP be a better method? Thank you for your help.

-drumbum360

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@astupidnameApr 16.2009 — What I want to be able to do on the form is when they use the drop down boxes to set the deadline date, if it is within three days of the current date, to make a red message under the boxes stating they need to call our office to verify this time frame.[/quote]

Can you post the html pertaining to the 'drop down boxes' and vicinity so we can see what you have to start with?
Copy linkTweet thisAlerts:
@drumbum360authorApr 17.2009 — [code=html]<tr>
<td>Desired Completion date<span style="color:#CC0000">*</span></td>
<td>Month</td><td>Day</td><td>Year</td>
</tr><tr><td></td><td><select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td><td>
<select name="day">
<%
dim i
for i=1 to 31
response.write("<option value='" & i & "'>" & i & "</option>")
next
%>
</select>
</td>
<td><select name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td>
</tr>[/code]
Copy linkTweet thisAlerts:
@astupidnameApr 17.2009 — How can I do this and would ASP be a better method?[/quote]
The below javascript will do what you want, note I added a script block in the table which prints out the day select options just for testing - remove it and keep your asp block if that's what that is in there. I'm not well versed on ASP, but do know that is a server-side language. It is best to have both, client-side (javascript) verification and server-side verification in case the client's javascript is disabled. Doing at least some verification on the client side lessens unhappy submission experiences. I can't help you with the ASP on the server-side, but the below javascript will work on the client-side:

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>astupidtitle</title>
<script type="text/javascript">

/***
* getSelectValue function parameters:
* select -object, the actual select passed as an object
* txtBool -boolean, passing true will return the select's text instead of it's value
**
* returns select's selected options value or text if txtBool is true
***/
function getSelectValue(select,txtBool) {
var opt = select.options[select.options.selectedIndex];
return (txtBool) ? opt.text : opt.value;
}

/***
* checkSelectedDate function parameters:
* @form -object containing the other elements
* @yrSel -string, name of year select
* @mthSel -string, name of month select
* @daySel -string, name of day select
* @msgEl -string, id of message element to show error message in
* @daysAllowed -number, number of days to allow
**
* returns true if date is greater than daysAllowed number of days from current time,
* or false and an error message display.
***/
function checkSelectedDate(form,yrSel,mthSel,daySel,msgEl,daysAllowed) {
var now = new Date(),
msgEl = document.getElementById(msgEl),
y = getSelectValue(form[yrSel]),
m = getSelectValue(form[mthSel],true),
d = getSelectValue(form[daySel]),
then = new Date(m + ' ' + d + ',' + y),
diff = then.getTime() - now.getTime(),
errorMsg = "The date selected is less than "+ daysAllowed +" days from now.";
errorMsg += " A minimum of "+ daysAllowed +" days is required please!";
if (diff < (86400000*daysAllowed)) { //86400000 milliseconds per day, 1000 milliseconds = 1 second
msgEl.innerHTML = errorMsg;
return false;
} else {
msgEl.innerHTML = '';
return true;
}
}

</script>
</head>
<body>
<div>
<form name="someForm" action="page2.html" onsubmit="return checkSelectedDate(this,'year','month','day','msgP',3);">
<table>
<tbody>
<tr>
<td>Desired Completion date<span style="color:#CC0000">*</span></td>
<td>Month</td><td>Day</td><td>Year</td>
</tr><tr><td></td><td><select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td><td>
<select name="day">
<!-- remove the below script block entirely, I just used it to mimic your asp or whatever that is below, to print out the day select's options -->
<script type="text/javascript">
for (var i = 1; i < 32; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}
</script>
<&#37;
dim i
for i=1 to 31
response.write("<option value='" & i & "'>" & i & "</option>")
next
%>
</select>
</td>
<td><select name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td>
<td><input type="submit" value="Submit"></td>
</tr>
</tbody>
</table>
</form>
<p id="msgP" style="color:red;"> </p>
</div>
</body>
</html>[/code]
Enjoy, and if you need any help with tweeking it at all, just ask!
Copy linkTweet thisAlerts:
@drumbum360authorApr 17.2009 — I really appreciate your help on this. I would really appreciate some more assistance with the code you provided me.

I put the javascript into the javascript I already have on the page to verify that all the other fields are filled out properly upon submission. The red text is always there though below the due date fields. I would like it to appear right away only if the date they select is either a date in the past or a date within three days of the current day, not upon submitting the form. Is there something else I need to do to achieve this and get the red text working?

Thanks!

Below a part of the code I am currently using:

[code=html]<script type="text/javascript">
function checkform(f)
{
if (f.requester.value=='') // not empty
{
// Name is wrong
alert('You must enter a name');
return false;
}
else if (!/(^d+$)/.test(f.phone.value)) // numbers only
{
// phone # is wrong
alert('You must enter a valid phone number')
return false;
}
else if (f.email.value.indexOf("@")==-1) // contains '@'
{
// email is wrong
alert('You must enter a valid email address')
return false;
}
else if (f.completion.value=='') // not empty
{
// Completion date is missing
alert('You must enter a completion date');
return false;
}
else if (f.meet.value=='') //not empty
{
//When I can meet is missing
alert('Please enter a time you can meet')
return false;
}
else if (f.projectTitle.value=='') // not empty
{
// something is wrong
alert('You must enter a project title');
return false;
}
else if (f.audience.value=='') // not empty
{
// something is wrong
alert('You must enter an audience');
return false;
}
else if (f.vision.value=='') // not empty<br />
{
// something is wrong
alert('You must explain your vision to us');
return false;
}

// If the script gets this far through all of your fields
// without problems, it's ok and you can submit the form

return true;
}

/***
* getSelectValue function parameters:
* select -object, the actual select passed as an object
* txtBool -boolean, passing true will return the select's text instead of it's value
**
* returns select's selected options value or text if txtBool is true
***/
function getSelectValue(select,txtBool) {
var opt = select.options[select.options.selectedIndex];
return (txtBool) ? opt.text : opt.value;
}

/***
* checkSelectedDate function parameters:
* @form -object containing the other elements
* @yrSel -string, name of year select
* @mthSel -string, name of month select
* @daySel -string, name of day select
* @msgEl -string, id of message element to show error message in
* @daysAllowed -number, number of days to allow
**
* returns true if date is greater than daysAllowed number of days from current time,
* or false and an error message display.
***/
function checkSelectedDate(form,yrSel,mthSel,daySel,msgEl,daysAllowed) {
var now = new Date(),
msgEl = document.getElementById(msgEl),
y = getSelectValue(form[yrSel]),
m = getSelectValue(form[mthSel],true),
d = getSelectValue(form[daySel]),
then = new Date(m + ' ' + d + ',' + y),
diff = then.getTime() - now.getTime(),
errorMsg = "The date selected is less than "+ daysAllowed +" days from now.";
errorMsg += " A minimum of "+ daysAllowed +" days is required please!";
if (diff < (86400000*daysAllowed)) { //86400000 milliseconds per day, 1000 milliseconds = 1 second
msgEl.innerHTML = errorMsg;
return false;
} else {
msgEl.innerHTML = '';
return true;
}
}

</script>


</head>

<body>
<div id="container">

<div id="title">
<p>Request Form</p><p> <b style="color:#FF0000">If you submitted a project request between April 9th - April 15th via this form and got an error email in your inbox then Housing Design DID NOT recieve the request due to a technical error. Please re-submit the request and we will get back to you asap.</b></p>
</div>

<div id="line">
&nbsp;
</div>
<div id="content">

<form action="processForm.asp" method="post" onSubmit="return checkSelectedDate(this,'year','month','day','msgP',3);">
<div id="left"><br />
<h4>Who are you?</h4>
<table>
<tr>
<td>Name<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="requester" type="text" id="requester" value="" /></td>
</tr>
<tr>
<td>Department<span style="color:#CC0000">*</span></td>
<td colspan="3"><select name="department">
<option value="housing">Housing</option>
<option value="conseling center">Counseling Center</option>
<option value="health services">Health Services</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td>Phone<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="phone" type="text" id="phone" value="" /></td>
</tr>
<tr>
<td>Email<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="email" type="text" id="email" value="" /></td>
</tr>
<tr>
<td>Desired Completion date<span style="color:#CC0000">*</span></td>
<td>Month</td><td>Day</td><td>Year</td>
</tr><tr><td></td><td><select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td><td>
<select name="day">
<%
dim i
for i=1 to 31
response.write("<option value='" & i & "'>" & i & "</option>")
next
%>
</select>
</td>
<td><select name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td>
</tr>
<tr><td><p id="msgP" style="color:red;">Please Call our office as your due date is short </p></td></tr>
<tr>
<td>Times you can meet<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="meet" type="text" id="meet" value="" /></td>
</tr>
</table>
[/code]
Copy linkTweet thisAlerts:
@astupidnameApr 18.2009 — I would like it to appear right away ..... not upon submitting the form[/quote]
The problem with that is the fact that the date is being selected from (potentially) 3 different selects, and there is no better way to know that the user is done playing with them to make his choice than to wait until submission time. After all, it's possible the user might only need to make one selection for, say, the month, or two or three. The user might actually make 4 or 7 or 48 selections playing with a decision on the completion date..... I won't try to read their mind as to whether they are done making their selection, and displaying an (potentially, depending on user's mindset) annoying message, until submission time.

I did, however, add a little extra sugar to it to set the select's initially to the earliest available completion date when the window loads. Also I set up the event handler for the requestForm (gave the form a name also "requestForm" - to match what I have in the window.onload function) in the window.onload function instead of inline in the html. Also moved the call to the checkSelectedDate function in to the checkform function and assigned it's value (true or false) to the enoughTime variable which gets returned if no other errors are found. I took the liberty of re-working your checks in the checkform function also, hope you don't mind. Was a bit too long and too many potential alerts when can all be handled in one alert, thus all statements are 'if' instead of all the 'else if's'.

I did change the way the message for not enough time is displayed. Rather than sending an alert or message from the checkSelectedDate function, I made that function simply show the message element by setting it's css display property to block (with it set to none initially in the css in head). See what you think of this:
Copy linkTweet thisAlerts:
@astupidnameApr 18.2009 — [code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>some title</title>
<style type="text/css">
#msgP { display:none; color:red; margin:0; }
</style>
<script type="text/javascript">
/*<![CDATA[*/ /*>fool my syntax hi-liter*/

function checkform(f) {
var errStr = '';
var enoughTime = checkSelectedDate(f,'year','month','day','msgP',3); //true/false
if (f.requester.value=='') {
errStr += "You must enter a namen";
}
if(!/(^d+$)/.test(f.phone.value)) {
errStr += "You must enter a valid phone numbern";
}
if (f.email.value.indexOf("@")==-1) {
errStr += "You must enter a valid email addressn";
}
/***** begin comment out, f.completion not in form
*I assume this part could be removed, replacing f.completion with the selects?*
if (f.completion.value=='') {
errStr += "You must enter a completion daten";
}
end comment out*****/
if (f.meet.value=='') {
errStr += "Please enter a time you can meetn";
}
/***** commenting out for testing, items 'projectTitle', 'audience' & 'vision' not in form
if (f.projectTitle.value=='') {
errStr += "You must enter a project titlen";
}
if (f.audience.value=='') {
errStr += "You must enter an audiencen";
}
if (f.vision.value=='') {
errStr += "You must explain your vision to usn";
}
end comment out*****/
if (errStr.length > 0) {
alert(errStr);
return false;
}
return enoughTime;
}

/***
* getSelectValue function parameters:
* @select -object, the actual select passed as an object
* @txtBool -boolean, passing true will return the select's text instead of it's value
**
* returns select's selected options value or text if txtBool is true
***/
function getSelectValue(select,txtBool) {
var opt = select.options[select.options.selectedIndex];
return (txtBool) ? opt.text : opt.value;
}

/***
* checkSelectedDate function parameters:
* @form -object containing the other elements
* @yrSel -string, name of year select
* @mthSel -string, name of month select
* @daySel -string, name of day select
* @msgEl -string, id of message element to un-hide which contains your error message
* @daysAllowed -number, number of days to allow
**
* returns true if date is greater than daysAllowed number of days from current time,
* or false and an error message display.
***/
function checkSelectedDate(form,yrSel,mthSel,daySel,msgEl,daysAllowed) {
var now = new Date(),
msgEl = document.getElementById(msgEl),
y = getSelectValue(form[yrSel]),
m = getSelectValue(form[mthSel],true),
d = getSelectValue(form[daySel]),
then = new Date(m + ' ' + d + ',' + y),
diff = then.getTime() - now.getTime();
if (diff < (86400000*daysAllowed)) { //86400000 milliseconds per day, 1000 milliseconds = 1 second
msgEl.style.display = "block";
return false;
} else {
msgEl.style.display = "none";
return true;
}
}

window.onload = function () {
//will set the date selects to the earliest completion date available
//note allowedDays variable below should be 1 greater than
//the daysAllowed argument passed in to the checkSelectedDate function.
//Also sets the form's onsubmit handler, instead of having it in-line in the html
var form = document.requestForm,
ySel = form.year,
mSel = form.month,
dSel = form.day,
d = new Date(),
oy = d.getFullYear(),
allowedDays = 4; //adjust this if desired
form.reset();
d.setTime(d.getTime() + (86400000*allowedDays)); //86400000 milliseconds in a day
var y = d.getFullYear();
var m = d.getMonth();
var day = d.getDate();
if (y > oy) { //this will only occur a couple days at end of year, but oh well, it's neet. And..
//I am presuming that your server side code would be set up to display only two years
//in the year select, with current year being first option and current year plus 1 as second option.
//If you want to TEST how this works: in the above variable declaration when it says d = new Date()
//enter a date in the parens of the Date in the following format:Example: d = new Date("Dec 28, 2009")
//and then you will note the 2009 option is no longer available
ySel.remove(0); //removes the first option in the year select
}
mSel.selectedIndex = m; //no need to subtract here, values returned by getMonth() start at 0 for the months
dSel.selectedIndex = day - 1; //subtracting 1 because the values in select start numbered at 1, and indexes start at 0
form.onsubmit = function () {
return checkform(this);
};
};

/*]]>*/
</script>
</head>
<body>
<div id="container">

<div id="title">
<p>Request Form</p><p> <b style="color:#FF0000">If you submitted a project request between April 9th - April 15th via this form and got an error email in your inbox then Housing Design DID NOT recieve the request due to a technical error. Please re-submit the request and we will get back to you asap.</b></p>
</div>

<div id="line">
&nbsp;
</div>
<div id="content">

<form name="requestForm" action="page2.html" method="post">
<div id="left"><br />
<h4>Who are you?</h4>
<table>
<tr>
<td>Name<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="requester" type="text" id="requester" value="" /></td>
</tr>
<tr>
<td>Department<span style="color:#CC0000">*</span></td>
<td colspan="3"><select name="department">
<option value="housing">Housing</option>
<option value="conseling center">Counseling Center</option>
<option value="health services">Health Services</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td>Phone<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="phone" type="text" id="phone" value="" /></td>
</tr>
<tr>
<td>Email<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="email" type="text" id="email" value="" /></td>
</tr>
<tr>
<td>Desired Completion date<span style="color:#CC0000">*</span></td>
<td>Month</td><td>Day</td><td>Year</td>
</tr><tr><td></td><td><select name="month">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</td><td>
<select name="day">
<!-- remove the below script block entirely, I just used it to mimic your asp or whatever that is below, to print out the day select's options -->
<script type="text/javascript">
/*<![CDATA[*/ /*>fool my syntax hi-liter*/
for (var i = 1; i < 32; i++) {
document.write('<option value="'+i+'">'+i+'</option>');
}
/*]]>*/
</script>
<!--<&#37;
dim i
for i=1 to 31
response.write("<option value='" & i & "'>" & i & "</option>")
next
%>-->
</select>
</td>
<td><select name="year">
<option value="2009">2009</option>
<option value="2010">2010</option>
</select></td>
</tr>
<tr><td colspan="3"><p id="msgP">Please Call our office as your due date is short</p></td></tr>
<tr>
<td>Times you can meet<span style="color:#CC0000">*</span></td>
<td colspan="3"><input name="meet" type="text" id="meet" value="" /></td>
</tr>
<tr><td><input type="submit" value="Submit" /></td></tr>
</table>
</div><!-- END LEFT DIV -->
</form>
</div><!-- END CONTENT DIV -->
</div><!-- END CONTAINER DIV -->
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@astupidnameApr 18.2009 — Also, be sure and note I commented out a couple of checks in the checkform function, as their elements were not in the form
Copy linkTweet thisAlerts:
@drumbum360authorApr 22.2009 — I greatly appreciate your help on this and it is exactly what I needed. Thank you again.
×

Success!

Help @drumbum360 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.29,
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,
)...