CodingForums.com - Complete novice needs a steer with HTML input form using javascript

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Complete novice needs a steer with HTML input form using javascript (http://www.codingforums.com/showthread.php?t=283860)

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)

It can be done with JavaScript but as not everyone has JavaScript you'll still need to check for it on the server.

To get the date so many years in the future less your one day you could use:

Code:

newDate = function(years) {

var dd, mm, dt;

dt = new Date();

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();

}

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)

Quote:

Originally Posted by Philip M (Post 1298675)

felgall's script is fine to add x years to the current date

That was what was asked for.

Quote:

Originally Posted by dambuster (Post 1298559)

Date 1 containes the current date

Quote:

Originally Posted by felgall (Post 1298803)

That was what was asked for.

No, what was asked for was

"If the user changes date 1: to say 02/06/2012 I would like to set the second date to 01/06/2016."

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.

Yes, but as I have said,

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). My script does that.