On Tue, Mar 4, 2008 at 1:31 PM, <[EMAIL PROTECTED]> wrote:
> All,
>
> I'm starting to build a basic form where the user can indicate the number of
> children they have.
> What I want to do is based on the number of kids value, dynamically generate
> birthday form fields.
this will get you started. it's very basic. does NOT account for
days in month (e.g. you could end up with February 31st being
submitted), nor does it remove elements. so if you select "3" kids,
you'll get 3 new options for birthdays. if you change it to 1, you'll
get a 4th. if you change it to 2, you'll get a 5th and 6th... :)
but it's a start.
<html>
<head>
<title></title>
<script type="text/javascript">
var months =
['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
function createBDayFields(n) {
for (var i=0; i<n; i++) {
// create a div to hold the 3 new <select> elements
newDiv = document.createElement('div');
newDiv.id = "bdayDiv" + i;
// create the 'month' dropdown
bdayMonth =
document.createElement('select');
bdayMonth.id = "birthdayMonth" + i+1;
bdayMonth.name = "birthdayMonth" + i+1;
for (var j=0; j<12; j++) {
bdayMonth.options[j] = new Option(months[j],
j+1);
}
// create the 'day' dropdown
bdayDay =
document.createElement('select');
bdayDay.id = "birthdayDay" + i+1;
bdayDay.name = "birthDayDay" + i+1;
for (var j=0; j<31; j++) {
bdayDay.options[j] = new Option(j+1, j+1);
}
// create the 'year' dropdown
bdayYear =
document.createElement('select');
bdayYear.id = "birthdayYear" + i+1;
bdayYear.name = "birthDayYear" + i+1;
for (var j=0; j<5; j++) {
bdayYear.options[j] = new Option(j+2004,
j+2004);
}
// create the new <label>
newLabel = document.createElement('label');
newLabel.appendChild(document.createTextNode('Birthday
' +
parseInt(i+1) + ': '));
newLabel.setAttribute('for', bdayMonth.id);
// append it to the form
document.getElementById('myForm').appendChild(newDiv);
document.getElementById('bdayDiv' +
i).appendChild(newLabel);
document.getElementById('bdayDiv' +
i).appendChild(bdayMonth);
document.getElementById('bdayDiv' +
i).appendChild(bdayDay);
document.getElementById('bdayDiv' +
i).appendChild(bdayYear);
}
}
</script>
</head>
<body>
<form id="myForm">
<label for="kids">Kids: </label>
<select name="kids" id="kids"
onchange="createBDayFields(this.options[this.selectedIndex].value);">
<option value=""></option>
<cfloop from="1" to="9" index="idx">
<cfoutput><option
value="#idx#">#idx#</option></cfoutput>
</cfloop>
</select>
</form>
</body>
</html>
--
Evelyn the dog, having undergone further modification pondered the
significance of short-person behaviour in pedal depressed,
pan-chromatic resonance, and other highly ambient domains. "Arf," she
said.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~|
Adobe® ColdFusion® 8 software 8 is the most important and dramatic release to
date
Get the Free Trial
http://ad.doubleclick.net/clk;160198600;22374440;w
Archive:
http://www.houseoffusion.com/groups/CF-Talk/message.cfm/messageid:300465
Subscription: http://www.houseoffusion.com/groups/CF-Talk/subscribe.cfm
Unsubscribe: http://www.houseoffusion.com/cf_lists/unsubscribe.cfm?user=89.70.4
