🔒 Locked

[web] Dynamic Form in JavaScript

Started by Daedalus AI Dec 11, 2006 at 5:28 AM 5 replies 1.2k views

Original Post

Dec 11, 2006 at 5:28 AM

Hi all, I want to create a dynamic form collecting user details, etc. I have 2 problems that I'm unsure how to accomplish: -> A date drop down list - Beginning date must be "todays" date, and up to 4 years more than the current year should be selectable. -> And to have dyanmically created text inputs. The number of text inputs to appear would depend on another static text input that requires a number. So the number entered in the static text input is the number of dynamic text inputs to appear. (Should the number be changed to a lower number, the required text inputs must dissappear again). I don't think making things visible/hidden is a good approach here ...? Would be grateful for any help. Thanks Daed.

Daedalus AI

Author

Daedalus AI

Dec 11, 2006 at 6:17 AM

I have got the dynamic text inputs i wanted now, although I'm having a strange problem that I may have to ask you guys about later :=P

Would still appreciate help with the date drop down lists though.

Daed.

Verminox

Dec 11, 2006 at 8:21 AM

You want all dates for 4 years? Then you are best using three different select inputs for day, month and year. If you are using a server side script like PHP then you can validate the date when the form is submitted (eg. 31 Feb is invalid, but 29 Feb 2004 is valid {I cooked up a JS script for this validation a few months back, let me know if you need it}). It would be silly to create a single dropdown for almost 1500 entries of 4 years worth of dates.

That being said, you can't make a dropdown for "today's date onwards" because you will need all dates, months in the list for futuristic dates. You can, however, preselect today's date using JS.

Either way you can use the following:

var TimeStamp = new Date();var Date = TimeStamp.getDate();var Month = TimeStamp.getMonth()+1; // Because this is from 0-11 by defaultvar Year = TimeStamp.getYear();

You can now work with those three variables.

Daedalus AI

Author

Daedalus AI

Dec 11, 2006 at 12:55 PM

Unfortunately, I'm not allowed to use PHP :(

But yeah, you're right, I want to use 3 different drop-down lists;

Day - Month - Year

I was just wondering whether there was a clever way of acquiring the days in a month, etc, rather than hard coding it all...

var Feb = 28;
var Feb_Leap = 29;
var Apr, Jun, Sep, Nov = 30;
var Jan, Mar, May, Jul, Aug, Oct, Dec = 31;

like so.

BTW, I would quite like to see your JS date validation code. It's something I'm going to have to do myself quite soon.

Much appreciated,
Daed.

Verminox

Dec 12, 2006 at 8:45 AM

function isdate(val){	//Patern is just to check if it is in the form YYYY-MM-DD	if(val.match(/^(\d{4})-(\d{2})-(\d{2})$/)){		//Case valid general date		var year = RegExp.$1		var month = RegExp.$2		var day = RegExp.$3					if(year>=1900 && year<=2000 && month<=12 && day<=31){			//Case date is valid and in limits			if(month=="02" || month=="04" || month=="06" || month=="09" || month=="11"){				//Case a month with less than 30 days				if(day<=30){						//Max days is 30								if(month=="02"){						//Case February						//Leap_Remainder is remainder for year/4						var leap_remainder = year%4						if(leap_remainder=="0" && day<=29){							//Case Leap Year and max 29 days							return true						}						else if(day<=28){							//Case Non-Leap Year and max 28 days							return true						}						else{							//Max days dont satisfy february							return false						}											}					else{						//Case non-Feb; we have already taken into account maxdays						return true					}				}				else{					//If maxdays is not 30					return false				}			}			else{				//Its a month with 31 days! Maxdays accounted for				return true			}					}		else {			//General date but either maxdays unsatisfied or year out of limits			return false		}	}	else{		//Its not a valid piece of date at all!		return false	}}

This I use to validate dates in the form YYYY-MM-DD. However, if you already have the three variables separate, then you can just edit the top part of the function... make it isdate(year,month,date) and proceed directly instead of checking the pattern.

DpakoH

Dec 29, 2006 at 7:28 PM

when i see the words dynamic and &#106avascript , the first thing that comes to my head is AJAX . so read about it and maybe u will solve ur problems :) **happy new year** -yani

Verminox

Dec 30, 2006 at 1:31 AM

Quote:
Original post by DpakoH
when i see the words dynamic and &#106avascript , the first thing that comes to my head is AJAX . so read about it and maybe u will solve ur problems :) **happy new year** -yani</td></tr></table></BLOCKQUOTE> That's a real bad habit if "Ajax" keeps coming to your mind for everything dynamic in &#106avascript. Even an alert box is considered a dynamic script.... How the hell is AJAX even relevant here? The OP wants to detect todays date and have dynamic text inputs.... AJAX is meant for getting/sending information from/to other web pages.... which has tottally no place over here...</td></tr></table></blockquote>

Topic Locked

This topic has been locked by a moderator. New replies are not allowed.