.insertBefore Not Working In FF

[antwan1986]

Hi all and thanks for reading. I have a simple script that works in IE and Safari, but not FF. Basically when I click a button I want an image to appear dynamically via JS. This is what i've got (watered down)

**JS function called Contact**

var loadingImg = document.createElement("img");
loadingImg.setAttribute("src", "/images/contact-playing.jpg");
loadingImg.setAttribute("width", "492");
loadingImg.setAttribute("height", "153");
loadingImg.setAttribute("alt", "Playing In My Studio");
document.getElementById("ContactFormDiv").insertBefore(loadingImg, ContactForm);

**HTML**
<div id="ContactFormDiv">
  <p id="hope">Test</p>
  <form action="javascript:Contact();" method="post" name="ContactForm" id="ContactForm">
    <input name="name" id="name" type="text" maxlength="50" tabindex="1" value="" />
    <input name="email" id="email" type="text" maxlength="50" tabindex="2" value="" />
    <textarea name="comments" id="comments" cols="50" rows="10" tabindex="3"></textarea>
    <input type="hidden" name="frmVid" id="frmVid" value="<?php echo $frmVid;?>" />
    <input type="hidden" name="frmTitle" id="frmTitle" value="<?php echo $frmTitle;?>" />
    <input class="submit" type="submit" name="submit" value="Submit" tabindex="4" />
  </form>
  </div> <!-- Closes the ContactFormDiv div -->

So if i'm correct it should insert the image before the form with the id of contactform. it works in IE and safari but not FF, any ideas?

Thanks,

Anthony

[~s.o.s~]

> document.getElementById("ContactFormDiv").insertBefore(loadingImg, ContactForm);

Where have you defined ContactForm?

[antwan1986]

> document.getElementById("ContactFormDiv").insertBefore(loadingImg, ContactForm);

Where have you defined ContactForm?

Hi and thanks for your reply.

ContactForm is the name and ID of the Form.

[~s.o.s~]

Then it won't work since insertBefore expects both arguments to be DOM element references. It works in IE since in IE the name of the element also contains the element reference. IMO, something like this should work:

var myDiv = document.getElementById("ContactFormDiv");
var myFrm = document.forms["ContactForm"];
myDiv.insertBefore(loadingImg, myFrm);

If it still doesn't work, look at the Error Console of Firefox which serves as a poor man's debugging utility. (Tools -> Error Console)

[antwan1986]

Then it won't work since insertBefore expects both arguments to be DOM element references. It works in IE since in IE the name of the element also contains the element reference. IMO, something like this should work:

var myDiv = document.getElementById("ContactFormDiv");
var myFrm = document.forms["ContactForm"];
myDiv.insertBefore(loadingImg, myFrm);

If it still doesn't work, look at the Error Console of Firefox which serves as a poor man's debugging utility. (Tools -> Error Console)

Thanks very much for your help. I'll give that a try now and let you know how it went!

Anthony

[antwan1986]

It works, thanks so so much for your help!

Anthony