DIV PROBLEM

[Andrea Gelsogroove]

Hi guys this is my problem :

I have created a js function where I can add fields on the fly, but
there seems to be a small flaw with Mozilla.

If you try to click on "Add" button you can see that for every click
there is a new text field and this is really useful
because I don't need to refresh the page every time. It works 100% fine
with Internet Explorer but in Mozilla it seems to loose the values
I type in in field 2 or field 3 etc.

For example, if I have 2 lines and I click to get a third one, I loose
the values in the fields in line 2, and line 1.

If I have 3 lines and want to add another one, I loose the values for
lines 2 and 3, and 1.

Again, this works fine in IE, but not in Mozilla.

Any idea how to fix this?


*this is the page *

http://dev.shipco.com/temp/div.html

*this is the code*

<form Action ="Save.php?ID=1 06" Name="input1" Method = Post
Onsubmit="retur n Checkform(this) ;">
<div id="prova"></div>

<table width=100% border="0" align="center" cellpadding="3"
cellspacing="1" >

<script>
function htmlwrite()


buildHTML= "<input type=text><br>"


elem = document.getEle mentById('prova ');
elem.innerHTML = elem.innerHTML + buildHTML;

}
</script>
</TD></TR>


<tr>
<td align=center colspan=2>
<input type=button class=button name=add
onClick="Javasc ript:htmlwrite( );" value = "Add TEXT FIELD">
</td>
</tr>
<Table>



Thanks a lot guys

Andrea

[Thomas 'PointedEars' Lahn]

Re: DIV PROBLEM

First, do not crosspost over top hierarchies. X-Post removed.

Second, do not try to arouse interest in your postings by writing the
Subject only in uppercase letters and/or with multiple sentence marks.
More people will be repelled than attracted by such a Subject header.

Third:

| [03:29:31] pointedears:~ $ host -t mx kkjkjkjij.it
| Note: nslookup is deprecated and may be removed from future releases.
| Consider using the `dig' or `host' programs instead. Run nslookup
| with the `-sil[ent]' option to prevent this message from appearing.
| Server: 62.53.246.30
| Address: 62.53.246.30#53
|
| ** server can't find kkjkjkjij.it: NXDOMAIN

By using a faked e-mail address you prevent you from getting
spam, but at the same time you help to destroy the Internet.
Due to the egotistical behavior you display with such, I will
not download your postings anymore until you change that. See
<http://www.interhack.n et/pubs/munging-harmful/> for details.

Andrea Gelsogroove wrote:
[color=blue]
> http://dev.shipco.com/temp/div.html[/color]

http://validator.w3.org/check?uri=http://dev.shipco.com/temp/div.html

[color=blue]
> <form Action ="Save.php?ID=1 06" Name="input1" Method = Post
> Onsubmit="retur n Checkform(this) ;">[/color]

<form action="Save.ph p?ID=106" name="input" method="post"
onsubmit="retur n Checkform(this) ;"

Watch for the case in URIs. Is the filename really `Save.php' or
is it `save.php' instead? Most servers are not using FAT or NTFS
file systems, thus filename case is important.

Watch for the case in attribute and JavaScript identifiers, too.
Lowercased identifiers are not only better compressible, they
also save you trouble in case-sensitive applications like XHTML
and JavaScript. For JavaScript, only identifiers of constructor
functions should start with an uppercase character, to avoid
confusion.
[color=blue]
> <div id="prova"></div>
>
> <table width=100% border="0" align="center" cellpadding="3"
> cellspacing="1" >
>
> <script>[/color]

The above is all invalid HTML. Write at least

<table width="100%" border="0" align="center" cellpadding="3"
cellspacing="1" >

and

<script type="text/javascript">

(But `script' *must* *not* be a child of `table', see below.)
[color=blue]
> function htmlwrite()
>
>
> buildHTML= "<input type=text><br>"[/color]

´buildHTML' is unnecessarily declared global here.
Use the `var' keyword to make it a local variable.

`type="text"' is the default, you can safely omit it.
[color=blue]
> elem = document.getEle mentById('prova ');[/color]

Again, `elem' need not and should not be declared global *in*
*general*. However, for this is a method called more than once
and operating on the same object, `elem' should be global and
hold the reference to the HTMLDivElement Object so that it
should not be retrieved every time the function is called.

But more important, document.getEle mentById(...) is a method
of the W3C-DOM and you do not check for support of it before
accessing it. See

http://pointedears.de.vu/scripts/test/whatami

for details.
[color=blue]
> elem.innerHTML = elem.innerHTML + buildHTML;[/color]

OTOH `innerHTML' is a proprietary property *not* part of the
W3C-DOM. Although supported in the HTML-DOM of recent user
agents, you should stick to one object model because of the
reasons mentioned in the test case document and because of the
problems that will arise otherwise if you possibly change the
DOCTYPE to XHTML.

Quickhack:

var oProva = null; // was `elem' previously
if (document.getEl ementById) // possibly W3C-DOM compliant
oProva = document.getEle mentById('prova ');
else if (document.all) // possibly IE4-DOM compliant
oProva = document.all['prova'];


// Using the argument `o' for passing the reference
// makes the function more independent of the context
// it is called from.
function htmlWrite(o)
{
if (o)
{
if (document.creat eElement && o.appendChild)
{
var oInput = document.create Element("input" );
if (oInput)
{
oInput.type = "text";
if (o.appendChild( oInput))
{
var oBr = document.create Element("br");
if (oBr)
{
o.appendChild(o Br);
}
}
}
}
else if (typeof o.innerHTML != "undefined" )
{
o.innerHTML += "<input><br>\n" ;
}
}
}
[color=blue]
> }
> </script>
> </TD></TR>[/color]

That is like my recent example of how `script' elements can be misplaced
while creating invalid HTML. The `script' element must not be the child
element of the `table' element, only `tbody', `thead', `tfoot', `th' and
`td' may be. The `script' element, however, has nothing to do with the
`table' element, thus it should be the child of the `head' element so
that the function is early available.
[color=blue]
> <tr>
> <td align=center colspan=2>
> <input type=button class=button name=add
> onClick="Javasc ript:htmlwrite( );" value = "Add TEXT FIELD">[/color]

Once you define the default scripting language standards-compliant with

<meta http-equiv="Content-Script-type" content="text/javascript">

within the `head' element you do not longer require proprietary
extensions like this. `javascript:' is basically a proprietary URI
scheme. Using it in presumed JavaScript code makes it only a label.
Only the IE browser component reads this label to define the used
scripting language, other UAs do not and will even trigger script
errors if labels are not supported (in event handlers). Write

<input type="button" name="add" value="Add TEXT FIELD" class="button"
onclick="htmlWr ite(oProva);"> <!-- pass a reference as arg. -->

instead. Note that users without JavaScript cannot use that
button, so you should provide a working alternative for them.
[color=blue]
> </td>
> </tr>
> <Table>[/color]

The last tag should be the close tag </table>. But you will not
want nor need a table here. Never use a `table' element for layout
purposes only. A table is a table is a table [psf 3.8], and CSS
exists.


HTH

PointedEars

[Fabian]

[META] munged vs unread addresses

Thomas 'PointedEars' Lahn hu kiteb:
[color=blue]
> By using a faked e-mail address you prevent you from getting
> spam, but at the same time you help to destroy the Internet.
> Due to the egotistical behavior you display with such, I will
> not download your postings anymore until you change that. See
> <http://www.interhack.n et/pubs/munging-harmful/> for details.[/color]

Just out of curiousity, which do you consider more harmful to teh
Internet:

1 - An obviously invalid/munged email address.
2 - An email address which looks valid, but which is never read.

With the first, anyone who tries and has basic knowledge of the internet
would know it is invalid. With the second, they will never know, and
neither would teh intended recipient, unless they then mention it in the
newsgroup.


--
--
Fabian
Visit my website often and for long periods!

http://www.lajzar.co.uk