form inside another form - what's wrong?

[Leszek]

Hi.

I wrote a script:



function zmiana(ile){
while(document.getElementById('accomp').childNodes.length>1){
ostatni=document.getElementById('document.dane.accomp').lastChild;
document.getElementById('document.dane.accomp').removeChild(ostatni);
}
for (i=1;i<=ile;i++){
pole=document.createElement("BR");
document.getElementById('accomp').appendChild(pole);

a=document.createTextNode("Name of accompanying person #"+i+" ")
document.getElementById('accomp').appendChild(a);

dane.style.fontWeight='bold';

pole=document.createElement("input");
pole.type = "text";
pole.size="40";
pole.id="$name"+i;
pole.name="$name"+i;
document.getElementById('accomp').appendChild(pole);
}
}
it's working with a form:

<form name="accomp">

// instructions

</form>

But now i want to put my form into another form:
<form name="dane">
<form name="accomp">

// instructions

</form>
<form>

What should i change in my function to make it working with my new form?
I tried putting 'dane.accomp' instead of 'accomp' but i'm getting a message
that "object is required"
when I put 'dane' instead of 'accomp' I didin't get any errors but it
didin't work correctly.

What's wrong?

Thanks for any ideas.
Leszek

 

[web.dev]

ostatni=document.getElementById('document.dane.accomp').lastChild;
document.getElementById('document.dane.accomp').removeChild(ostatni);

The argument you have passed to getElementById is incorrect. It should
be replaced with the actual id:

ostatni = document.getElementById("accomp").lastChild;
document.getElementById("accomp").removeChild(ostatni);

On a side note, it would also be more efficient if you did something
like the following:

var formObj = document.getElementById("accomp");

while(formObj.childNodes.length > 1)
{
formObj.removeChild(formObj.lastChild);
}

dane.style.fontWeight='bold';

You are incorrectly referencing 'dane'. You could potentially fix it
like so:

document.getElementById("dane").style.fontWeight = "bold";

pole.id="$name"+i;
pole.name="$name"+i;

IIRC, id and name can only start with any character a-z, A-Z, and
underscore.

<form name="dane">
<form name="accomp">

// instructions

</form>
<form>

There can be several forms in a single document, but the FORM element
can't be nested. Otherwise you'll have invalid html.

 

[Richard Cornford]

Leszek wrote:

But now i want to put my form into another form:

<snip>

Forms may not contain forms.

Richard.

 

[Thomas 'PointedEars' Lahn]

function zmiana(ile){
while(document.getElementById('accomp').childNodes.length>1){

Care to test for methods before you call them?

ostatni=document.getElementById('document.dane.accomp').lastChild;

[1]^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^[2]

[1] Undeclared global variable. Use the `var' keyword.

[2] There is no ID `document.dane' or `document.dane.accomp'.
And ever heard of the `document.forms' collection?

document.getElementById('document.dane.accomp').removeChild(ostatni);
}
for (i=1;i<=ile;i++){

^
Another undeclared global variable.

pole=document.createElement("BR");

^^^^
And another one. And calling another method without feature-testing it
before.

document.getElementById('accomp').appendChild(pole);

And again.

a=document.createTextNode("Name of accompanying person #"+i+" ")

^ ^^^^^^^^^^^^^^^^^^^^^^^
And again.

document.getElementById('accomp').appendChild(a);

dane.style.fontWeight='bold';

pole=document.createElement("input");
pole.type = "text";

If document.createElement() returned not an object, this unguarded statement
would be a ReferenceError. Besides, last time I checked type="text" was
the default.

pole.size="40";
pole.id="$name"+i;

In case that is assigning the ID as-is: IDs must not start with `$', they
must start with an ASCII latin letter.

<URL:http:///www.w3.org/TR/html4/types.html#type-id>

In case `$name' is an attempt at including the value of a client-side
variable: there is no variable expansion in double quotes in JS/ECMAScript;
you will have to do string concatenation or joining of Array elements.

In case `$name' is a reference to a server-side variable (say from PHP),
you should have posted what the user agent gets (View Source), since you
are manipulating its DOM.

pole.name="$name"+i;

The same goes for NAME values. However, the `name' attribute of `input'
elements is of type _CDATA_ where `$' is allowed as first character; so
it is also allowed for the `name' property of HTMLInputElement objects
representing it.

document.getElementById('accomp').appendChild(pole);
}
}
it's working with a form:

If that really worked, this would be merely a highly unlikely coincidence.

<form name="accomp">

The `action' attribute is missing.

// instructions

Those are not instructions, HTML is not a programming language.

</form>

But now i want to put my form into another form:
<form name="dane">
<form name="accomp">

// instructions

</form>
<form>

Since that is not Valid HTML, that is not going to work.

<URL:http://validator.w3.org/>

What should i change in my function to make it working with my new form?

You cannot.

[...]
What's wrong?

Better ask what is right, the answer to that would have been shorter.
Please RTFM before you ever code, that saves many people much time,
including you.


PointedEars

 

[Thomas 'PointedEars' Lahn]

Leszek wrote:
[...]
On a side note, it would also be more efficient if you did something
like the following:

var formObj = document.getElementById("accomp");

That would assume that "accomp" is an ID. It is not, it is a name.
Anyway,

var formObj = document.forms["accomp"];

is more reliable. Never use IDs and document.getElementById() if you
do not have to.

while(formObj.childNodes.length > 1)
{
formObj.removeChild(formObj.lastChild);
}


You are incorrectly referencing 'dane'. You could potentially fix it
like so:

document.getElementById("dane").style.fontWeight = "bold";

document.forms["dane"].style.fontWeight = "bold";

is far more compatible, yet still error-prone because of the Reference
Worm[tm] it represents and the proprietary properties it uses.

IIRC, id and name can only start with any character a-z, A-Z, and
underscore.

You are recalling wrong ID and NAME values can only start with any
ASCII latin letter, that is a-z and A-Z. However, that does not apply
to the `name' attribute/property, since the attribute type is CDATA (and
not NAME) and so it and its representing property may have _any_ (string)
value, provided for the attribute value to not contain references to
undeclared entities.


PointedEars

 

[Thomas 'PointedEars' Lahn]

You are recalling wrong ID and NAME values can only start with any
ASCII latin letter, that is a-z and A-Z. However, that does not apply
to the `name' attribute/property

of _`input'_ elements/_HTMLInputElement_ objects (because it does apply to
the `name' attribute/property of `meta' elements/HTMLMetaElement objects
and `a' elements/HTMLAnchorElement objects)

since the attribute type is CDATA (and not NAME) [...]

PointedEars

 

[Thomas 'PointedEars' Lahn]

You are recalling wrong ID and NAME values can only start with any
ASCII latin letter, that is a-z and A-Z. However, that does not apply
to the `name' attribute/property

of _`input'_ elements/_HTMLInputElement_ objects (because it does apply to
the `name' attribute/property of `meta' elements/HTMLMetaElement objects)

since the attribute type is CDATA (and not NAME) [...]

PointedEars