Dynamically adding a form element and field to a page

[Mike Dee]

Is it possible to dynamically create a new form object (form1), then create
a new form field object and add it form1, and then add form1 to the current
document? I need to do all this in script rather than using the html <form>
and related tags. Can this be done to support both IE, Firefox?

Any code snippets or samples showing how to do this would be fantastic.
Thanks!

--- Mike

 

[Randy Webb]

Mike Dee said the following on 3/2/2006 12:47 AM:

Is it possible to dynamically create a new form object (form1),
Yes.

then create a new form field object and add it form1,
Yes.

and then add form1 to the current document?
Yes.

I need to do all this in script rather than using the html <form>
and related tags. Can this be done to support both IE, Firefox?
Yes.

Any code snippets or samples showing how to do this would be fantastic.

createElement()
appendChild()
so on.
Search the archives.

 

[Mike Dee]

Thanks for the tips Randy. I was able to write some JS that does this.
However there is one remaining challenge I was hoping you had some thoughts
on.

I now am dynamically creating the form and a form field just fine. However
if I go to another page and then press the back button, the form is
destroyed and form field values are lost. This behavior is different though
than if I hard code a form instead of creating it dynamically.

For instance when I create a form using HTML instead of programmatically via
the DOM and set a form field value in script, if I leave the page and then
return, the browser preserves that form field and its value as it was last
left. This is the same exact behavior I need when I programmatically build
the form, instead of it being destroyed. Is this possible? It would seem
so - why does the browser care how the form was created (either html or
dom) - I wouldn't think that would make a difference but apparently it does.
Thanks!

--- Mike

 

[Randy Webb]

Mike Dee said the following on 3/2/2006 9:56 AM:

Thanks for the tips Randy. I was able to write some JS that does this.

Tip #1: Don't top-post here, it is frowned upon like the plague

However there is one remaining challenge I was hoping you had some thoughts
on.

I now am dynamically creating the form and a form field just fine. However
if I go to another page and then press the back button, the form is
destroyed and form field values are lost. This behavior is different though
than if I hard code a form instead of creating it dynamically.

Yes. When you hard code it, it is there for the browser and there is
nothing left to chance as long as the HTML is valid code to start with.
When you introduce JS dependency you also introduce unreliability that
you are seeing.

For instance when I create a form using HTML instead of programmatically via
the DOM and set a form field value in script, if I leave the page and then
return, the browser preserves that form field and its value as it was last
left. This is the same exact behavior I need when I programmatically build
the form, instead of it being destroyed. Is this possible?

That depends, directly, on how you are creating the form. If the form
requires user interaction to be created, then no, you aren't going to
*easily* be able to do what you want. You could try setting a cookie but
you would run out of space in a hurry if your form is very large though.

 

[Mike Dee]

That depends, directly, on how you are creating the form. If the form
requires user interaction to be created, then no, you aren't going to
*easily* be able to do what you want. You could try setting a cookie but
you would run out of space in a hurry if your form is very large though.

Thanks for the tips. The form I am creating dynamically is being done in
the document's main OnLoad event, so it does not require user interaction to
be created. However, it still does not persist if you move off the page and
come back with the back button. It will recreate it just fine, but then I
lose the values that I had purposely stored in the form field. Any way to
work around this and make the form persist? Cookies are not an option.

As an alternative to storing this value in a form field - is there any other
nook or cranny within the browser I could tuck a value into that would
persist if a user moved away and then came back with the Back button? Maybe
adding something to a style / stylesheet or sometihng? I would not want to
value to persist if the page is recalled via a link later - just need it to
persist and be present in the even tthe back button is used. I know this
sounds like a cookie could help but as mentioned cookies cannot be used at
all in this solution.

Thanks!

--- Mike

 

[Randy Webb]

Mike Dee said the following on 3/3/2006 1:10 PM:

Thanks for the tips. The form I am creating dynamically is being done in
the document's main OnLoad event, so it does not require user interaction to
be created. However, it still does not persist if you move off the page and
come back with the back button. It will recreate it just fine, but then I
lose the values that I had purposely stored in the form field. Any way to
work around this and make the form persist? Cookies are not an option.

If you want the form there every time the page is loaded, why not hard
code the form?
What a browser does when you hit the Back button is up to the browser.

As an alternative to storing this value in a form field - is there any other
nook or cranny within the browser I could tuck a value into that would
persist if a user moved away and then came back with the Back button?

Not really, unless you stored it on the server.

Maybe adding something to a style / stylesheet or sometihng? I would not want to
value to persist if the page is recalled via a link later - just need it to
persist and be present in the even tthe back button is used. I know this
sounds like a cookie could help but as mentioned cookies cannot be used at
all in this solution.

If the user leaves to another part of your site? Frames maybe and keep
the data in the parent frame. It would still break if I went from your
site to microsoft.com to google.com and then Back button'ed my way back.