Complete novice needs a steer with HTML input form using javascript
Can someone give me a steer in the right direction.
I have an HTML form that requires two dates to be entered. Date 1 containes the current date and date 2 is set to the current date + 1, 2, 3 or 4 years in the future less 1 day. Dates are UK format dd/mm/yyyy. This is done with a PHP script on the serverside.
e.g.
Date 1: 02/11/2012 Date 2: 01/11/2016
If the user changes date 1: to say 02/06/2012 I would like to set the second date to 01/06/2016. Can this be done in javascript.
(You can probably guess I'm a complete novice when it comes to javascript Many thanks in advance)
felgall's script is fine to add x years to the current date, but if the date is derived from a date entered by the user into an input box things get more complicated. You need to check that the entered date is in the correct format, within a valid range, and is a valid date (not 56th Febtember).
Code:
<html>
<head>
<body>
Add this many years minus one day <select id = "yearsahead">
<option value = 0 selected>0</option>
<option value = 1>1</option>
<option value = 2>2</option>
<option value = 3>3</option>
<option value = 4>4</option>
</select>
<br><br>
Enter the date in dd/mm/yyyy format <input type = "text" id = "firstdate" onblur = "addyears(this.value)">
<br><br>
<input type = "text" id = "seconddate" readonly>
<script type = "text/javascript">
function addyears(which) {
document.getElementById("seconddate").value = ""; // clear previous result
var yrsahead = Number(document.getElementById("yearsahead").value);
var dsp = which.split("/");
var dd = Number(dsp[0]); // UK date format
var mm = Number(dsp[1]);
var yy = Number(dsp[2]);
if (checkValidDate(yy,mm,dd)) { // first check that the entered date is valid
// if it is valid, add the selected number of years
dt = new Date(yy,mm-1,dd);
dt.setFullYear(dt.getFullYear()+yrsahead);
dt.setDate(dt.getDate() - 1); // subtract a day
dd = dt.getDate();
mm = dt.getMonth()+1; // remember that in Javascript date objects the months are 0-11
yy = dt.getFullYear();
if (dd < 10) dd = '0' + dd; // leading zeroes
if (mm < 10) mm = '0' + mm;
var result = dd + '/' + mm + '/' +yy;
document.getElementById("seconddate").value = result;
}
}
function checkValidDate(yr,mmx,dd) {
var currentyear = new Date().getFullYear();
var earliestyear = 1910; // could be currentyear minus some value
var latestyear = currentyear + 10;
if (yr < earliestyear || yr > latestyear) { // adjust these values to suit
alert ("Year is out of range - must be " + earliestyear + " - " + latestyear);
document.getElementById("firstdate").value = "";
return false;
}
var mm = mmx-1; // remember that in Javascript date objects the months are 0-11
var nd = new Date(yr,mm,dd);
var ndmm = nd.getMonth();
if (ndmm != mm) {
alert ("The date you have entered is in the wrong format or is an Invalid Date!");
document.getElementById("firstdate").value = "";
return false;
}
else {
alert (dd + "/" + mmx + "/" + yr + " is a Valid Date"); // comment out if desired
return true;
}
}
</script>
</body>
</html>
As felgall has said, you need to check it on the server as well.
Do please read the posting guidelines regarding thread titles. The thread title is supposed to help people who have a similar problem in future. Yours is useless for this purpose. You can (and should) edit it to make it more meaningful. For example "Set a date x years ahead".
"I know that you believe that you understand what you think I said, but, I am not sure you realise that what you heard is not what I meant". (Robert
McCloskey)
__________________
All the code given in this post has been tested and is intended to address the question asked.
Unless stated otherwise it is not just a demonstration.
Last edited by Philip M; 12-10-2012 at 11:23 AM..
Reason: Noticed typo
So there were actually two completely different things being asked for. Anyway only a very minor modification to the code I originally supplied is needed to be able to start with any date at all.
Code:
Date.prototype.newDate = function(years) {
var dd, mm, dt;
dt = new Date(this);
dt.setFullYear(dt.getFullYear()+years);
dt.setDate(dt.getDate()-1);
dd = dt.getDate();
if (dd < 10) dd = '0'+dd;
mm = dt.getMonth()+1;
if (mm < 10) mm = '0'+mm;
return dd+'/'+mm+'/'+dt.getFullYear();
}
So you then simply load the first date into a Date object (as you would do as a part of your validation of that field anyway if you are validating the date properly) and then call the newDate method on that object to return the second date already formatted as required.
Before you post, read our: 
