Firefox not detecting form elements populated through AJAX

While working on a PHP script I encountered a problem which was working fine on IE but not on Firefox.

I was trying to display a list of records through AJAX and user had to select any one to proceed further. To make sure that the user actually selected and then proceeded I placed a JavaScript validation which scanned the list and prompted if there was no selection.

As the list was generated within a form I assumed (like most others) that JavaScript would treat them as form elements and validate them. Surely this assumption was correct for IE but boy was I in a surprise.

Firefox did not recognize those elements at all. Not only that as it did not recognize the whole JavaScript validation code failed thereby allowing the user to proceed which caused problems to the user.

I tried to access these elements by getElementById but that did not work either thereby causing me to think that it was impossible that the browser could not access an element which was visible on the screen. I Googled and found that this problem had been encountered by others as well.

Firefox checks for formatting and layout of tags very carefully and does not recognize elements if they do not follow convention. For e.g. the start tag must have an end tag. This was precisely the case with me. I was using <strong> to make the text stand out. Problem was that I had used an extra </strong> tag thus causing the problem on Firefox. I removed the extra tag and tried again. Voila it worked. However I had to use getElementById to access the elements. So, I made the changes and it started to work fine on both IE and Firefox and problem was resolved.

Leave a Comment