Member Avatar for atrusmre

Ok this may be a stupid questions. Is there a way to make a dynamic form? For example, if I wanted to create a form that took a users birthday, how do I make it so it would change the number of days in the month to correspond to the month selected. (with out having to submit the form). So if a user was to select their birth month as February it would put the number of days to 28. Any Ideas?

Thanx in advance

~Atrus

  • 3 Contributors
  • 4 Replies
  • 100 Views
  • 21 Hours Discussion Span
  • Latest Post Latest Post by hollystyles

Dani AI

Generated

asked for changing the day dropdown when the month changes without a submit. was right to point at a client-side solution — the cleanest approach is unobtrusive JavaScript that recalculates month length (taking leap years into account) and rebuilds the day select. Below is a simple, robust pattern: an isLeapYear check, a daysInMonth helper, and an update routine that preserves the previously chosen day when possible and falls back to the current year if none is supplied.

function isLeapYear(y){
  y = Number(y) || new Date().getFullYear();
  return (y % 4 === 0 && y % 100 !== 0) || (y % 400 === 0);
}

function daysInMonth(month, year){
  var idx = Number(month);
  var y = Number(year) || new Date().getFullYear();
  var lengths = [31, isLeapYear(y) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  if (idx >= 1 && idx <= 12) return lengths[idx - 1];
  return lengths[idx] || 31;
}

function updateDays(){
  var m = document.getElementById('month').value;
  var y = document.getElementById('year').value;
  var day = document.getElementById('day');
  var max = daysInMonth(m, y);
  var sel = Number(day.value) || 1;

  day.options.length = 0;
  for (var i = 1; i <= max; i++){
    var o = document.createElement('option');
    o.value = i; o.text = i;
    if (i === sel) o.selected = true;
    day.appendChild(o);
  }
  if (sel > max) day.value = max;
}

document.getElementById('month').addEventListener('change', updateDays);
document.getElementById('year').addEventListener('change', updateDays);
window.addEventListener('load', updateDays);

Notes: run this on load so prefilled values stay consistent; ensure month values are numeric (1–12) or adjust mapping; always validate dates server-side as a final check; HTML5 input[type="date"] is another option in modern browsers but browser support and UI vary. This pattern keeps the interface responsive and avoids a submit round-trip.

Recommended Answers

All 4 Replies

Member Avatar for hollystyles

javascript obviously.

Javascript has a little quirk where a date of zero will set the date to be the last day of the previous month. Likewise is there are 30 days in a month and you set a date of 31 it will be the 1st day of the next month, a date of 40 would be the 10th day of the next month. This can lead to some very weird funkiness if you're not careful but we can definitely exploit this for a useful prototype which will give us the number of days in a specific month. We'll do this up as a prototype so it's available to all our Dates.

Date.prototype.daysInMonth = function () {
   return new Date(this.getFullYear(), this.getMonth()+1, 0).getDate()
}

var d = new Date();
document.writeln('Number of days in this month: '+d.daysInMonth());

This came from here:

All you need to do is substitute this.getMonth() in the prototype with document.getElementById("usermonthdropdown").value

Member Avatar for Member #210412

nice topic

Member Avatar for atrusmre

javascript obviously.

Is there anyway of doing it w/o java?

~Atrus

Member Avatar for hollystyles

>Is there anyway of doing it w/o java?
We *are* doing it without java! Javascript is *NOT* Java tsk.

I cannot think of any better solution than using javascript. You have to execute SOMETHING on the client if you don't want to postback server-side to do it. To do that you need to run a program. The options are:

Javascript (By far the most common sense solution)
Java Applet (overkill)
VBScript (IE browsers Only)
ActiveX Control (IE Only and overkill)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.