Html form not sending input elements loaded using Ajax

[noballack]

I've got a problem, I'm working with Ajax in a web with a form with a list of checkbox added to the form via an Ajax.Updater method. These added checkboxs are not been sended by the form if I use Firefox or Safari.

My source code is something like that:

<script type="text/javascript" src="http://www.my_web_page.com//js/prototype-1.4.0.js"></script>
<script>
function showMoreOptions( url, pars, div_id ){    
    if (document.getElementById(div_id).style.display=='block'){
        document.getElementById(div_id).style.display='none';
    } else {
        document.getElementById(div_id).style.display='block';
        var myAjax = new Ajax.Updater( {success: div_id}, url, { method: 'post', parameters: pars });
    }
}
</script>
<form name="form_name" method="post" action="script.cgi">
<table border="0" cellspacing="0" cellpadding="1" align="center">
<tr><td><input type="checkbox" name="1" value="1"></td><td width="100%">Option 1</td></tr>
<tr><td><input type="checkbox" name="2" value="2"></td><td width="100%">Option 2</td></tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td><a href="javascript:showMoreOptions('http://www.my_web_page.com', 'do=more_options', 'more');">More options</a></td></tr>
<tr><td><div id="more" style="position:relative;display:none;"></div></td></tr>
</table>
</form>

When the user 'clicks' on 'more options', the javascript function does make a call to a cgi script using Ajax. This call returns a piece of code 'html' like that:

<table border="0" cellspacing="0" cellpadding="1" align="center">
<tr><td><input type="checkbox" name="3" value="3"></td><td width="100%">Option 3</td></tr>
</table>

That code is placed into the div called 'more' using Ajax.Updater method.
Everything works ok in explorer, but if the user works with firefox or safari the checkbox returned via ajax (the one in the div tag) is not sended to the cgi script. Is like if the checkbox wasn't into the form. Of course if I use the 'view source code' option in firefox and safari the div is empty. And if I make a list of the elements in the form using form.elements property using javascript the checkbox doesn't show up.

Someone knows why does it works with explorer and why it doesn't works using the other navigators?
Can you give me a solution?

[noballack]

I have an ajax updater method that updates a div element with html and input elements. All this
code is inside a form. With IE if I submit the form I can collect this input elments, but with
Firefox I can't, because this elements (the ones inside the div) are not sended to my cgi.

I don't know how to deal with that problem. Can someone help me please?

[AricC]

Post your code.

[noballack]

Here is my code:

<script type="text/javascript" src="http://www.my_web_page.com//js/prototype-1.4.0.js"></script>
<script>
function showMoreOptions( url, pars, div_id ){    
    if (document.getElementById(div_id).style.display=='b  lock'){
        document.getElementById(div_id).style.display='non  e';
    } else {
        document.getElementById(div_id).style.display='blo  ck';
        var myAjax = new Ajax.Updater( {success: div_id}, url, { method: 'post', parameters: pars });
    }
}
</script>
<form name="form_name" method="post" action="script.cgi">
<table border="0" cellspacing="0" cellpadding="1" align="center">
<tr><td><input type="checkbox" name="1" value="1"></td><td width="100%">Option 1</td></tr>
<tr><td><input type="checkbox" name="2" value="2"></td><td width="100%">Option 2</td></tr>
</table>
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr><td><a href="javascript:showMoreOptions('http://www.my_web_page.com', 'do=more_options', 'more');">More options</a></td></tr>
<tr><td><div id="more" style="position:relative;display:none;"></div></td></tr>
</table>
</form>

When the user 'clicks' on 'more options', the javascript function does make a call to a cgi script using Ajax. This call returns a piece of code 'html' like that:

<table border="0" cellspacing="0" cellpadding="1" align="center">
<tr><td><input type="checkbox" name="3" value="3"></td><td width="100%">Option 3</td></tr>
</table>

That code is placed into the div called 'more' using Ajax.Updater method.
Everything works ok in explorer, but if the user works with firefox or safari the checkbox returned via ajax (the one in the div tag) is not sended to the cgi script. Is like if the checkbox wasn't into the form. Of course if I use the 'view source code' option in firefox and safari the div is empty. And if I make a list of the elements in the form using form.elements property using javascript the checkbox doesn't show up.

Can you give me a solution?