What am I missing?

[Vanecelli]

So, I've got this dynamic form element thing goiing on, but I'm getting the output undefined. I know it's goiing to be something simple I'm missing, but I'm just not figuring it out.

FUNCTION

function grplist() {
var num=document.form1.rms.value
for (var n=0;n<num;n++) {
document.write("<input name='guest"+n+"' type='text' id='guest"+n+"' size='20' />");
}
}

The call to the function happens on page load, and after an onChange="history.go(0)". Prints the form elements just fine, but there is always the undefined after the last box. Please help make it go away. :)

[iam_clint]

show us the form

also add ; after var num=document.form1.rms.value

<script>
function grplist() {
var num=document.form1.rms.value
for (var n=0;n<num;n++) {
document.write("<input name='guest"+n+"' type='text' id='guest"+n+"' size='20' />");
}
}
</script>
<form name="form1">
<input type="text" name="rms" id="rms">
<input type="button" onclick="grplist();" value="click me">
</form>
 

this worked fine for me..

[Vanecelli]

Wow, thanks for the fast reply.
Well, it's a decent length form, so here's the parts that matter;

<input name="rms" type="text" id="rms" size="3" class="bold" onchange="history.go(0);" />

<td><script type="text/javascript">
{
document.write(grplist())
}
</script></td>
</tr>
All in form form1.
So, when the user tabs out of "rms", the page refreshes and the grplist() is written again. The ; doesn't seem to make a difference btw. When I tried on a fresh page with your code, it plugged in the undefined too.

[iam_clint]

why are you trying to write document.write(grplist()) to the screen
of course this is going to return undefined

[Vanecelli]

why are you trying to write document.write(grplist()) to the screen
of course this is going to return undefined

I'm trying to display the correct number of text boxes according to the "rms" value. What's the better option? I've been hammering away at this for a bit.

[iam_clint]

<script>
function grplist() {
var num=document.form1.rms.value
var tmp = ""
for (var n=0;n<num;n++) {
tmp += "<input name='guest"+n+"' type='text' id='guest"+n+"' size='20' />";
}
document.getElementById("formstuff").innerHTML = tmp;
}
</script>
<form name="form1">
<input name="rms" type="text" id="rms" size="3" class="bold" onchange="grplist();" />
</form>
<div id="formstuff"></div>
 

try this out for size

of course put the div where u want it to be written and change the rms onchange to how i have it.

[Vanecelli]

<script>
function grplist() {
var num=document.form1.rms.value
var tmp = ""
for (var n=0;n<num;n++) {
tmp += "<input name='guest"+n+"' type='text' id='guest"+n+"' size='20' />";
}
document.getElementById("formstuff").innerHTML = tmp;
}
</script>
<form name="form1">
<input name="rms" type="text" id="rms" size="3" class="bold" onchange="grplist();" />
</form>
<div id="formstuff"></div>
 

try this out for size

of course put the div where u want it to be written and change the rms onchange to how i have it.

For-the-luv-of-God! I was tryiing to figure that out yesterday!! lol The broken way just worked first. I was tryiing to manipulate the input tag though, not a div. So close, yet so clueless. :) Thank you very much.

[iam_clint]

np if you need more help just come back and post.

welcome to the scripts

New posts come into my email thats why it was a quick response cause i was just sitting here doing nothing :P

[Vanecelli]

So ... about that Internet Explorer.

I went one step further, 'cause i can't help myself, and worked the code for a table row instead of a div tag. Works great in FF, error code 0 as soon as it tries to output the <td> cell HTML in IE. Any thoughts? It's quite slick in FF. Otherwise I have to work out some convoluted row/div fix. Or scrap the table theory all together.

function types(tip){
    var num=document.form1.rms.value
    var tmp = "<strong>Please enter all expected guests names:</strong><br />"
    for (var n=0;n<num;n++) {
    tmp += "Guest name: <input name='guest"+n+"' type='text' id='guest"+n+"' size='15' /> Service Num: <input name='guestnum"+n+"' type='text' id='guestnum"+n+"' size='15' /><br />";
    }
    if (tip=="ind"){
    document.getElementById("grpbook").style.visibility="hidden"
    document.form1.unit.style.visibility="hidden";
    document.getElementById("glist").innerHTML="";
    }
    else{
    document.getElementById("grpbook").style.visibility="visible";
    document.form1.unit.style.visibility="visible";
    document.getElementById("glist").innerHTML="<td valign='top' class='lft'><strong>Guest List:</strong></td><td colspan='3' class='l'>"+tmp+"</td>";
    }
}

Where id="glist" is the table row id. Am I outta whack again in my thought process?

[iam_clint]

<script>
function types(tip){
        var num=document.form1.rms.value
 var tmp = "<strong>Please enter all expected guests names:</strong><br />"
 for (var n=0;n<num;n++) {
 tmp += "Guest name: <input name='guest"+n+"' type='text' id='guest"+n+"' size='15' /> Service Num: <input name='guestnum"+n+"' type='text' id='guestnum"+n+"' size='15' /><br />";
 }
 if (tip=="ind"){
 document.getElementById("grpbook").style.visibility="hidden"
 document.form1.unit.style.visibility="hidden";
 document.getElementById("glist").innerHTML="";
 }
 else{
 document.getElementById("grpbook").style.visibility="visible";
 document.form1.unit.style.visibility="visible";
        addcolumn('glist', '<strong>Guest List:</strong>', 'lft', 'top', 'center');
        addcolumn('glist', tmp, 'lft', 'top', 'center');
 }
}
function addcolumn(rowid, ctext, tclass, tvalign, talign) {
 var trow = document.getElementById(rowid);
 var tcolumn = document.createElement("td");
 tcolumn.setAttribute("class", tclass);
 tcolumn.setAttribute("valign", tvalign);
 tcolumn.setAttribute("align", talign);
 tcolumn.innerHTML = ctext;
 trow.appendChild(tcolumn);
}
</script>
 

I wrote the function addcolumn hope it works for you good luck post if you need help

[Vanecelli]

So, I won't pretend to entirely follow the new theory, but i get the gist. What I don't get is why the innerHTML for the <td> will work in FF but not IE.

Oh, and I can pick apart the extra columns you aded. Or not. Guess we'll see. ;)

[iam_clint]

because they are different enough said :P you will fight between the 2 like cats tails tied togethor and thrown over a clothes line (no i haven't done this) (recently)

[Vanecelli]

because they are different enough said :P you will fight between the 2 like cats tails tied togethor and thrown over a clothes line (no i haven't done this) (recently)

Well, I can appreciate the witty stab, but WHY are they different? Oh, and we have a problem :) Well, I do.
Every time the types function is called another column is added TO, but does not replace the first ones. Oh, and IE still doesn't look right. It is creating a 4 columns rather than 2. I fixed it in FF by adding a colspan variable to the addcolumn function, but it didn't have any effect in IE. :(

[iam_clint]

they are different due to the way they interpret the w3c standards


Ie was out before the standards were even in place (I think) but in any case its the way they handle the code.

post a link to the page you are working on.

[iam_clint]

to get rid of the columns you need to give each new column a name and loop through them and removeChild instead of appendChild

[Vanecelli]

they are different due to the way they interpret the w3c standards


Ie was out before the standards were even in place (I think) but in any case its the way they handle the code.

post a link to the page you are working on.

http://book.cfbtrenton.com/filloutn.php
Change the number of guests first and all looks perfect in FF, but not IE. Click Group Booking radio button, or change the number again, and another column is added. Just want it to look like when it first runs on FF, and then replace itself if it gets called again.

[iam_clint]

function types(tip){
 var num=document.form1.rms.value
 var tmp = "<strong>Please enter all expected guests names:</strong><br />"
 for (var n=0;n<num;n++) {
 tmp += "Guest name: <input name='guest"+n+"' type='text' id='guest"+n+"' size='15' /> Service Num: <input name='guestnum"+n+"' type='text' id='guestnum"+n+"' size='15' /><br />";
 }
 if (tip=="ind"){
 document.getElementById("grpbook").style.visibility="hidden"
 document.form1.unit.style.visibility="hidden";
 document.getElementById("glist").innerHTML="";
 }
 else{
 document.getElementById("grpbook").style.visibility="visible";
 document.form1.unit.style.visibility="visible";
 var trow = document.getElementById('glist');
 removeChildren(trow);
 addcolumn('glist', '<strong>Guest List:</strong>', 'lft', 'top', 'center', '1');
 addcolumn('glist', tmp, 'lft', 'top', 'center', '3');
 }
}
function addcolumn(rowid, ctext, tclass, tvalign, talign, span) {
 var trow = document.getElementById(rowid);
 var tcolumn = document.createElement("td");
 tcolumn.setAttribute("class", tclass);
 tcolumn.setAttribute("valign", tvalign);
 tcolumn.setAttribute("align", talign);
 tcolumn.setAttribute("colspan", span);
 tcolumn.innerHTML = ctext;
 trow.appendChild(tcolumn);
}
function removeChildren(obj) {
 while (obj.hasChildNodes()) obj.removeChild(obj.firstChild);
}
 
 

give this a whirl

[Vanecelli]

F MS. WTH won't rowspan work in IE? lol

[iam_clint]

but did this fix your problem? make your table bigger or width 100% the td with set attribute.



and for a number being passed through it doesn't need to be '3' but 3

and do it this way..
tcolumn.colSpan = span;

[Vanecelli]

The column gets replaced when the function is called, but IE is still messed up. rowspan seems to not work. Actually, none of the attributes are working in IE. It's ignoring the class assignment alltogether. Plus the valign, well, everything. Stupid MS.

[Vanecelli]

The column gets replaced when the function is called, but IE is still messed up. rowspan seems to not work. Actually, none of the attributes are working in IE. It's ignoring the class assignment alltogether. Plus the valign, well, everything. Stupid MS.

Ah hah!!!

tcolumn.className = tclass;

instead of

 tcolumn.setAttribute("class", tclass);

worked!!

[iam_clint]

good good, your the first person i had to go to 3 pages of posting with :P

by the way you have an error on line 270
Calendar is undefined

[Vanecelli]

good good, your the first person i had to go to 3 pages of posting with :P

by the way you have an error on line 270
Calendar is undefined

Well, thank you very much for the help. And, I know. It's a copy of the working page and I was too lazy to add my includes. :)