Form DOM element not recognized (created) in ajax form in IE when placed with end tag missing

Skipping a form end tag </form> costed me almost a day (i had to go to bed abandoning the fixing for some time though;)). I had been using ajaxForm with jQuery to submit ajax form which was placed on a popup dialog box opened through ajax. The form worked well in Mozilla Firefox, Google Chrome, Safari but did not work in Internet Explorer 7 & 8 (IE7 & IE8 ; i didn’t test in other versions of IE but perhaps they would not work either). The IE simply would not create the <form> tag at all so if you try to alert $(“#formID”).length it would return always 0(zero). It started to work fine (in IE) when i placed </form> to mark the end of the form (i know it was a mistake to not to place it there though).

Strangely if i placed the same form (without end tag) on a direct html page (not ajax) it would work fine.

So what i have learned from this lesson that browsers (FF, Safari and Chrome atleast) other than IE would complete missing <form> tag (specifically for a ajax response) for you but IE would’t. I am not sure how many such HTML tags are there which are completed by these browsers automatically but there are some for sure. Please have you comments on this.

Also, i had a similar issue in previous versions of FF(may be prior to 2.x but i am not sure)  where it wouldn’t add a form field into POST array if it is was placed in irregular order in html document. For example:

<?php
if(isset($_POST['submit']))    {
print_r($_POST);
}
?>

<table>
<form method="post">
<tr>
<td>
<input type="text" name="entry_one" value="" />
<input type="submit" name="submit" value="Send Data" />
</td>
</tr>
</form>
</table>

submitting this form would’t go anywhere as the “submit” and “entry_one” fields would’t be set within POST array. They (FF people) seem to have fixed it anyway it and  works ok in all browers these days (FF, Chrome, IE and Safari). Anyway, the correct way to write the above form code is this:

<form method="post">
<table>
<tr>
<td>
<input type="text" name="entry_one" value="" />
<input type="submit" name="submit" value="Send Data" />
</td>
</tr>
</table>
</form>

Or this is equally correct way:

<table>
<tr>
<td>
<form method="post">
<input type="text" name="entry_one" value="" />
<input type="submit" name="submit" value="Send Data" />
</form>
</td>
</tr>
</table>

Share on Facebook

Tweet

Follow us

Save