Firefox won't let me insert a new form..?

[mrflibble]

I'm trying to use AJAX to insert a form into a webpage (straight out of the Bulletproof AJAX book) but for some reason when I run it using Firefox the <form action=''...> code is deleted and not inserted. It works fine in Safari/IE.

Does anyone know what is going on here? Is there some XSS security thing going on?

I'm just using .innerHTML= to update the HTML with the form.

[acoder]

Welcome to TSDN!

Can you post your code?

[mrflibble]

Thank you acoder.

The haddphoneaccount.cgi called by ajax returns a form. Below is the generated source that firefox has, first when the form is hardcoded into the page, secondly when the same form is inserted with .innerHTML

hardcoded

<div id="addphoneaccount"><input name="userid" value="xxx" type="hidden">
<form name="addphoneaccountform" action="" id="addphoneaccountform" method="post">
<h1>addphoneaccount for xxx</h1><table id="tableaddphoneaccount" class="tableaddphoneaccount"> <tbody>
<tr><td>Account Name: </td><td><input name="phoneaccountname" value="" type="text"></td></tr>
<tr><td><input type="submit"></td></tr></tbody></table></form></div></form></div></div></body></html>

ajax inserted

<div id="addphoneaccount"><h1>addphoneaccount for </h1><table id="tableaddphoneaccount" class="tableaddphoneaccount"> 
<input name="userid" value="" type="hidden"><tbody>
<tr><td>Account Name: </td><td><input name="phoneaccountname" value="" type="text"></td></tr>
<tr><td><input type="submit"></td></tr></tbody></table></div></form></div></div></body></html>

You can see that for some reason Firefox cuts out the <form..> part of the htmt that is inserting.



Full JS code below.

function prepareForm()
{
    if(!document.getElementById)
        {
            return;
        }
    if(!document.getElementById("addphoneaccountform"))
        {
            return;
        }
    document.getElementById("addphoneaccountform").onsubmit = function()
    {
        var data ="";
        for (var i=0; i<this.elements.length; i++)
            {
                data+= this.elements[i].name;
                data+="=";
                data+= escape(this.elements[i].value);
                data+= "&";
            }
        alert(data);
        return !sendData(data);
    };
 
}
function sendData(data)
{
    var request = getHTTPObject();
    var url = 'haddphoneaccount.cgi';
    if(request)
        {
            request.onreadystatechange = function()
            {
                parseResponse(request);
            };
            request.open("POST", url, true);
            request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            request.send(data);
            return true;
        }
    else
        {
            return false;
        }
}
 
function parseResponse(request)
{
    //    alert("paser"+request+" rs:"+request.readyState+" st"+request.status);
    if (request.readyState == 4)
        {
            if (request.status == 200 || request.status == 304)
                {
                    var addphoneaccount = document.getElementById('addphoneaccount');
                    alert(request.responseText);
                    addphoneaccount.innerHTML = request.responseText;
                    prepareForm();
                }
 
        }
}
window.onload=prepareForm;
 

[mrflibble]

Ok. I've found a page which says that you can't just put form code in a DIV, but you must add it to the dom. I'll try that I guess...

[bedhinesh]

whatever the new form u created or replacing the older form just keep the form outside the table tag<form><table></table></form> it looks small thing for me it works after a long search by changing this works fine

[Ferris]

there's no problem to insert a new form by using innerHTML,but the problem I guess,is that you add the form into another form.this is illegal.

for example,you cann't code like this:
<form id="form1">
<form id="form2">
</form>
</form>


and in your hardcoded, I can see that you really do this:

</form></div></form>

maybe it can work in Safari or IE,but not in firefox.firefox found you want to insert a form inside another form,it will remove the new one automatically,so you can't see <form action=.....> and </form>.

so,check your code.

hope it helps. :)