...

View Full Version : How to add fields to the form



telmessos
08-27-2007, 08:51 AM
Hi all,

I have a form and there are three drop down menus (adults, children, infants) which has the values from 0 to 10. I want my javascript code add new text fields to the form when the drop down menu changes.
For Example:
Selected option is 0. When the client changes adults drop down to 2, children drop down to 1 and infants drop down to 1, I want the code add
<input type="text" name="adult1" /><br>
<input type="text" name="adult2" /><br>
<input type="text" name="child1" /><br>
<input type="text" name="inf1" /><br>
to the HTML.

Any idea how?

Thanks
Ceyhun

shyam
08-27-2007, 12:42 PM
there are plenty of examples littered around codingforums about this topic if u had spent some time searching through the archives...well, what the hell i'd time to kill...so, here goes

function $(v) {
return document.getElementById(v);
}
window.onload = function() {
$('adultCount').onchange = handleChange('adultCount', 'adultHolder', 'adult');
$('childrenCount').onchange = handleChange('childrenCount', 'childrenHolder', 'child');
$('infantCount').onchange = handleChange('infantCount', 'infantHolder', 'infant');
}
function handleChange(which, where, prefix) {
return function() {
var howMany = parseInt($(which).value);
if ( howMany > 0 ) {
var vals = [];
while ( $(where).firstChild ) {
var rem = $(where).removeChild($(where).firstChild);
if ( rem.nodeType == 1 && rem.nodeName == 'INPUT' && rem.name.indexOf(prefix) != -1 ) {
vals.push(rem.value);
}
}
console.log(vals);
for ( var i = 1; i <= howMany ; i++ ) {
var inp = document.createElement('input');
inp.setAttribute('type', 'text');
inp.setAttribute('name', prefix + i);
if ( i <= vals.length ) {
inp.setAttribute('value', vals[i-1]);
}
$(where).appendChild(inp);
$(where).appendChild(document.createElement('br'));
}
}
};
}


<TABLE>
<TR>
<TD>
<SELECT id="adultCount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</SELECT>
</TD>
<TD>
<SELECT id="childrenCount">
<option value="0">0</option>
...
<option value="5">5</option>
</SELECT>
</TD>
<TD>
<SELECT id="infantCount">
<option value="0">0</option>
...
<option value="5">5</option>
</SELECT>
</TD>
</TR>
<TR>
<TD id="adultHolder"></TD>
<TD id="childrenHolder"></TD>
<TD id="infantHolder"></TD>
</TR>
</TABLE>

telmessos
08-28-2007, 07:03 AM
hi shyam,
I am not very good in Javascript. But I have an error message of console undefined when I run this script. :(

shyam
08-29-2007, 02:39 PM
there are plenty of examples littered around codingforums about this topic if u had spent some time searching through the archives...well, what the hell i'd time to kill...so, here goes

function $(v) {
return document.getElementById(v);
}
window.onload = function() {
$('adultCount').onchange = handleChange('adultCount', 'adultHolder', 'adult');
$('childrenCount').onchange = handleChange('childrenCount', 'childrenHolder', 'child');
$('infantCount').onchange = handleChange('infantCount', 'infantHolder', 'infant');
}
function handleChange(which, where, prefix) {
return function() {
var howMany = parseInt($(which).value);
if ( howMany > 0 ) {
var vals = [];
while ( $(where).firstChild ) {
var rem = $(where).removeChild($(where).firstChild);
if ( rem.nodeType == 1 && rem.nodeName == 'INPUT' && rem.name.indexOf(prefix) != -1 ) {
vals.push(rem.value);
}
}
console.log(vals);
for ( var i = 1; i <= howMany ; i++ ) {
var inp = document.createElement('input');
inp.setAttribute('type', 'text');
inp.setAttribute('name', prefix + i);
if ( i <= vals.length ) {
inp.setAttribute('value', vals[i-1]);
}
$(where).appendChild(inp);
$(where).appendChild(document.createElement('br'));
}
}
};
}


<TABLE>
<TR>
<TD>
<SELECT id="adultCount">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</SELECT>
</TD>
<TD>
<SELECT id="childrenCount">
<option value="0">0</option>
...
<option value="5">5</option>
</SELECT>
</TD>
<TD>
<SELECT id="infantCount">
<option value="0">0</option>
...
<option value="5">5</option>
</SELECT>
</TD>
</TR>
<TR>
<TD id="adultHolder"></TD>
<TD id="childrenHolder"></TD>
<TD id="infantHolder"></TD>
</TR>
</TABLE>


remove that



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum