Member Avatar for 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

  • 2 Contributors
  • 5 Replies
  • 2K Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by antwan1986

Dani AI

Generated

the root cause is what hinted at: insertBefore needs real DOM nodes for both arguments. In IE (and some older WebKit), a form name/id can leak a global like window.ContactForm, so your line happened to work. Firefox does not expose that, so you were passing an undefined reference. Also note that the second argument must be a child of the same parent or standards‑compliant browsers will throw a NotFoundError.

If you want this to fire on submit and actually see the image (without the page immediately reloading), wire an event listener and prevent the default submit. This also avoids action="javascript:..." which is brittle.

document.getElementById('ContactForm').addEventListener('submit', function (e) {
  e.preventDefault(); // keep the page in place
  var parent = document.getElementById('ContactFormDiv');
  var form = this;

  if (!parent || form.parentNode !== parent) return;

  // create once; skip if already added
  if (!parent.querySelector('img.js-loading')) {
    var img = new Image();
    img.src = '/images/contact-playing.jpg';
    img.width = 492;
    img.height = 153;
    img.alt = 'Playing In My Studio';
    img.className = 'js-loading';
    parent.insertBefore(img, form); // image before the form
  }

  // TODO: send your AJAX request here, then submit normally if needed
  // form.submit();
});

Quick checks:

  • If you ever want to append instead, pass null as the second argument or use parent.appendChild(img).
  • If the form is not found, fail gracefully or choose a different reference node (e.g., parent.firstChild).

Recommended Answers

All 5 Replies

Member Avatar for ~s.o.s~ 
> document.getElementById("ContactFormDiv").insertBefore(loadingImg, ContactForm);

Where have you defined ContactForm?

Member Avatar for 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.

Member Avatar for ~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)

Member Avatar for 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

Member Avatar for antwan1986

It works, thanks so so much for your help!

Anthony

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.