As part of a response I create a form. When the user clicks one
of two buttons I invoke a javascript function:
<input type="button" name="submit" value="Update"
onclick="javascript:saveItem()"/>
here is the top of that function----------------

function saveItem () { // save updated Item - from itemsToEdit
alert ("saveItem - entering 208")
alert ("saveItem - " + document.getElementById("EditItemsForm");

The problem is that returns null, as if the form did not exist,
but inspection of the source shows it present.

I presume the problem is that the form has not been created when
the .js is evaluated even though it is there by the time it is
executed.

I have many similar functions that work fine but this is the only
one that references a form created on the fly.

The apparent solution is to move the form definition to a static
part of the script but I don't know how to reference it so that
it appears when the onclick event happens.

--bill

On Fri, 17 Sep 2021 14:42:15 -0400, bill wrote:
> As part of a response I create a form. When the user clicks one
> of two buttons I invoke a javascript function:
> <input type="button" name="submit" value="Update"
> onclick="javascript:saveItem()"/>
> here is the top of that function----------------
>
> function saveItem () { // save updated Item - from itemsToEdit
> alert ("saveItem - entering 208")
> alert ("saveItem - " + document.getElementById("EditItemsForm");
>
> The problem is that returns null, as if the form did not exist,
> but inspection of the source shows it present.
>
> I presume the problem is that the form has not been created when
> the .js is evaluated even though it is there by the time it is
> executed.
>
> I have many similar functions that work fine but this is the only
> one that references a form created on the fly.
>
> The apparent solution is to move the form definition to a static
> part of the script but I don't know how to reference it so that
> it appears when the onclick event happens.
>
> --bill

Either the needed element has the wrong ID, or is served within an IFRAME.

On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:
>
> Either the needed element has the wrong ID, or is served within an IFRAME.

Or is within a Shadow DOM.

On 9/18/2021 11:41 AM, JJ wrote:
> On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:
>>
>> Either the needed element has the wrong ID, or is served within an IFRAME.
>
> Or is within a Shadow DOM.
>

On 9/18/2021 11:41 AM, JJ wrote:
> On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:
>>
>> Either the needed element has the wrong ID, or is served
within an IFRAME.
>
> Or is within a Shadow DOM.
>
to explain in somewhat more detail:
I have 2 nested divs
The user enters data into a text box in the outer div. This
triggers a NEW XMLHtttpRequest which invokes a .php script.
The output of the script lists the search data in the 2nd div
with a button to edit the selected data item.

The button click calls a js function that calls another new
XMLHtttpRequest which is serviced by another php script that puts
the item's data back into a form in the 2nd div

The form contains data elements and a button to call a js script
to save the edited data.

That script fails because it can not find the form.

rather than copy the entire function I list only enough to show
the failure.
------------------------------
function saveItem () {
alert ("saveItem - entering 208")
alert ("saveItem - " +
document.getElementById("EditItemsForm"));

The both alerts are executed with the 2nd showing
"saveItem - " + null

If I change the EditItemsForm to another element that is not
dynamically generated it does not fail; it returns the id.

Thank you very much for taking the time to read this.
-bill

I now define the form in the main part of the script, without any
input elements and then use the form attribute in the generated
part.

--
Bill Drescher
william {at} TechServSys {dot} com

On Sat, 18 Sep 2021 14:22:35 -0400, bill wrote:
>
> If I change the EditItemsForm to another element that is not
> dynamically generated it does not fail; it returns the id.

Then the `getElementById` is called before the dynamically generated
`EditItemsForm` element is created and placed into the document. i.e.
`EditItemsForm` is called too soon.

The code which requires the element should be executed after the element has
been dynamically generated and placed into the document.