dynamic form and strange behaviour

[jmark]

I am generating dynamic forms by overwriting an existing form but I am
getting an unexpected behaviour.

I have the code like shown blow

<div id="formWarpper">
<script type="text/javascript>
function verifyform() {
if (document.form1.text1.value == '') {
alert("text1 value is empty");
}
}
</script>
<form name=form1 onsubmit="return verifyform()>
<input type=text name=text1>
<input type=submit value=Submit>
</form>
</div>

I then create a new form dynamically after an ajax call as shown below
and replace the contents of formWrapper with the new form

document.getElementById(formWarpper).innerHTML= '
<script type="text/javascript>
function verifyform() {
if (document.form2.text2.value == '') {
alert("test2 value is empty");
}
}
</script>
<form name=form2 onsubmit="return verifyform()>
<input type=text name=text2>
<input type=submit value=Submit>
</form>';

The screen is replaced with the new form. If I click View->Page Source
in FF, I see the code for the old form but if I click inspect in
firebug I see the code for the new form.

if I click submit on the new form I get an error

document.form1.text1 has no properties (which is for the old form)

Why is the code for the old form being called while that form is no
longer active? What can I do to stop this error. That is when the
screen is showing the new form, I should not expect any code in the
old form to be loaded.


Thanks
John

 

[Pete]

<div id="formWarpper">
<script type="text/javascript>
function verifyform() {
if (document.form1.text1.value == '') {
alert("text1 value is empty");
}
}
</script>

One problem that I noticed, verifyform() doesn't return a value so
your onsubmit will always evaluate to false.

 

[Pete]

For testing code, wouldn't that be a good thing though? Hard to debug a
page that keeps navigating away.

Inadvertenly working?

How about onclick="doValidation();return false;"

Then if the page does navigate away you know that there is a problem
with doValidation().

 

[jmark]

(e-mail address removed) said the following on 7/11/2007 8:37 PM:










Any JS code that is inserted via innerHTML does not get executed by the
browser (there are two exceptions but they are rare). Since your script
block isn't getting executed then the previous verifyform function still
exists and is the one that is called. Since it is checking form1.text1
you are getting the error you see (which is a correct error). If you
want the script block executed, the best way is to use createElement and
appendChild to create a script block and then insert the .text/.src
property of the script element. Search the archives for the word
loadJSFile along with my name and you will find articles that will cover
how to cause just about any script executed.

--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ -http://jibbering.com/faq/index.html
Javascript Best Practices -http://www.JavascriptToolbox.com/bestpractices/- Hide quoted text -

- Show quoted text -

Thank you very much. Your solution worked.

John