By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
449,135 Members | 1,311 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 449,135 IT Pros & Developers. It's quick & easy.

Html form not sending input elements loaded using Ajax

P: 3
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:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="http://www.my_web_page.com//js/prototype-1.4.0.js"></script>
  2. <script>
  3. function showMoreOptions( url, pars, div_id ){    
  4.     if (document.getElementById(div_id).style.display=='block'){
  5.         document.getElementById(div_id).style.display='none';
  6.     } else {
  7.         document.getElementById(div_id).style.display='block';
  8.         var myAjax = new Ajax.Updater( {success: div_id}, url, { method: 'post', parameters: pars });
  9.     }
  10. }
  11. </script>
  12. <form name="form_name" method="post" action="script.cgi">
  13. <table border="0" cellspacing="0" cellpadding="1" align="center">
  14. <tr><td><input type="checkbox" name="1" value="1"></td><td width="100%">Option 1</td></tr>
  15. <tr><td><input type="checkbox" name="2" value="2"></td><td width="100%">Option 2</td></tr>
  16. </table>
  17. <table width="100%" cellspacing="0" cellpadding="0" border="0">
  18. <tr><td><a href="javascript:showMoreOptions('http://www.my_web_page.com', 'do=more_options', 'more');">More options</a></td></tr>
  19. <tr><td><div id="more" style="position:relative;display:none;"></div></td></tr>
  20. </table>
  21. </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:

Expand|Select|Wrap|Line Numbers
  1. <table border="0" cellspacing="0" cellpadding="1" align="center">
  2. <tr><td><input type="checkbox" name="3" value="3"></td><td width="100%">Option 3</td></tr>
  3. </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?
Nov 22 '06 #1
Share this Question
Share on Google+
3 Replies


P: 3
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?
Nov 24 '06 #2

Expert 100+
P: 1,892
Post your code.
Nov 25 '06 #3

P: 3
Here is my code:

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript" src="http://www.my_web_page.com//js/prototype-1.4.0.js"></script>
  2. <script>
  3. function showMoreOptions( url, pars, div_id ){    
  4.     if (document.getElementById(div_id).style.display=='b  lock'){
  5.         document.getElementById(div_id).style.display='non  e';
  6.     } else {
  7.         document.getElementById(div_id).style.display='blo  ck';
  8.         var myAjax = new Ajax.Updater( {success: div_id}, url, { method: 'post', parameters: pars });
  9.     }
  10. }
  11. </script>
  12. <form name="form_name" method="post" action="script.cgi">
  13. <table border="0" cellspacing="0" cellpadding="1" align="center">
  14. <tr><td><input type="checkbox" name="1" value="1"></td><td width="100%">Option 1</td></tr>
  15. <tr><td><input type="checkbox" name="2" value="2"></td><td width="100%">Option 2</td></tr>
  16. </table>
  17. <table width="100%" cellspacing="0" cellpadding="0" border="0">
  18. <tr><td><a href="javascript:showMoreOptions('http://www.my_web_page.com', 'do=more_options', 'more');">More options</a></td></tr>
  19. <tr><td><div id="more" style="position:relative;display:none;"></div></td></tr>
  20. </table>
  21. </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:

Expand|Select|Wrap|Line Numbers
  1. <table border="0" cellspacing="0" cellpadding="1" align="center">
  2. <tr><td><input type="checkbox" name="3" value="3"></td><td width="100%">Option 3</td></tr>
  3. </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?
Nov 28 '06 #4

Post your reply

Sign in to post your reply or Sign up for a free account.