AJAX created input field does not work in FireFox

[jakesee]

Hi there,

I'm quite new to AJAX and need some help on a peculiar firefox behavior regarding forms submission.

I have have an input field

...<td id="ajax_field"><input type="text" name="hobby"></td>...

I am adding an option to change this <input> to <select> if the user wishes to choose from a list instead. so i have

<a href="#" onclick="show_input()">new hobby</a>
<a href="#" onclick="show_select()">choose from list</a>

after the information is entered and submit <input type="submit"...> is clicked, everything goes as expected in IE7.

However in firefox 2, it doesn't. When I change to

<form method="GET" action="process.php"...>

I realised that the AJAX created fields are not passed on to the "process.php".

How can I make this work?

Thanks in advance.

Jake

[~s.o.s~]

Firefox comes with an excellent debugging utility called Firebug which you can put to your use in this case. Also, the problem might lie in the code which changes the INPUT element to SELECT . How are you making the switch? Are you removing the old element and adding a new one or modifying the existing element? A better way here would be to inspect the state of the web page after show_select() function has been called.

[jakesee]

Thanks s.o.s,

The way I make the switch in

<td id="ajax_field"><input type="text" name="hobby"></td>

as to use

function show_select() {
 // AJAX transaction ...
var xmlHttp = GetXMLHttp();
// ... pass a php script that generates <select>
// xmlHttp.readyState == 4 (completed)
 document.getElementById('ajax_field').innerHTML = xmlHttp.responseText;
}

I currently don't see any problem yet. I use firefox plugin webdeveloper and it doesn't report any errors.

I will try firebug and report here with any errors found.

thanks!

[jakesee]

Hi,

I now find my problem, thanks to s.o.s. and firebug.

It's to do with wrong nesting for <table> and <form>

I always thought it is ok to nest as such:

<table>
<form>
<tr><td></td></tr>
</form>
</table>

apparently those HTML validator i used doesn't report this as an error.

However, with firebug, it sort of tells me it's wrong by greying the lines out... so after i changed it to

<form>
<table>
<tr><td></td></tr>
</table>
</form>

the AJAX created input field is now able to submit in FireFox.

Thanks. But I think I had a reason in the past why I choose to nest it the way I did in the first HTML snippet... hope the related problem doesn't appear again.