944,198 Members | Top Members by Rank

Ad:
Sep 29th, 2009
-1

Simple form not working through Ajax, works ok from a direct html

Expand Post »
Hello... I can't see why this form is not working, when I generate if from a php script through Ajax.
I made a test with the same code written directly in an html document and it works ok.
Would appreciate any help.

This is the code that generates the html in the PHP script (it's passed through JSON):
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. $quadrePrincipal=$quadrePrincipal."
  2. <div id=\"uploadI\">
  3. <form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
  4. <fieldset>
  5. <INPUT name=\"comentari\" type=\"text\"><br />
  6. </fieldset>
  7. </div>";
  8.  
  9. $informacio=$informacio."
  10. <fieldset>
  11. <input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
  12. </fieldset>
  13. </form>";

This is the test in a simple html document:
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link type="text/css" rel="stylesheet" media="all" href="../css/editora.css" />
  6.  
  7. <title>Test Form</title>
  8. </head>
  9. <body>
  10. <table>
  11. <tr>
  12. <td id="quadrePrincipal">
  13. <div id="uploadI">
  14. <form action="testForm.php" method="post" enctype="multipart/form-data">
  15. <fieldset>
  16. <INPUT name="comentari" type="text"><br />
  17. </fieldset>
  18. </div>
  19. </td>
  20. <td id="informacio">
  21. <fieldset>
  22. <input type="submit" name="submitBtn" class="sbtn" value="Alta ficha" /><br />
  23. </fieldset>
  24. </form>
  25. </td>
  26. </tr>
  27. </table>
  28. </body>
  29. </html>

And here is a snapshot of the resulting html for both, from Firebug. The only strange thing I have seen is that the form is closed inside the first TD, but it does the same for both, and one is working fine:
(when it says "Direct" on the right side it means directly written in an html document)


Smoke is coming out from my head right now
Last edited by Altairzq; Sep 29th, 2009 at 2:41 pm.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Sep 29th, 2009
0

Re: Simple form not working through Ajax, works ok from a direct html

Altairzq,

It appears that the browser's HTML parser is tolerant on page load to the <form> ... </form> tags being inside different table cells. But this tolerance (unsurprisingly) disappears when you insert two separate blocks of HTML one containing <form> and the other containing </form> .

The reason this is unsurprising is that at the time of inserting the first block, it has no knowledge of the second block, so it does its best guess - it closes the form!

Try adjusting the php code to return a single variable contining the whole block of HTML, rather than doing it in two parts, and pleeeeeeease ensure that the HTML is well formed by putting the <form> ... </form> tags are outside the table ie.
HTML Syntax (Toggle Plain Text)
  1. $xxx = "<form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
  2. <table>
  3. <tr>
  4. <td id=\"quadrePrincipal\">
  5. <div id=\"uploadI\">
  6. <fieldset>
  7. <INPUT name=\"comentari\" type=\"text\"><br />
  8. </fieldset>
  9. </div>
  10. </td>
  11. <td id=\"informacio\">
  12. <fieldset>
  13. <input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
  14. </fieldset>
  15. </td>
  16. </tr>
  17. </table>
  18. </form>"
You will need to add a div wrapper (with an id) in which its innerHTML can be replaced.

This stands a chance of working.

Airshow
Last edited by Airshow; Sep 29th, 2009 at 5:13 pm.
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,527 posts
since Apr 2009
Sep 29th, 2009
0

Re: Simple form not working through Ajax, works ok from a direct html

Thanks a lot Airshow, will try to do as you say.

Problem is that the table is already defined and the php only populates these two cells... but I guess I can have an empty form waiting for the php to fill it... hopefully...
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Sep 30th, 2009
0

Re: Simple form not working through Ajax, works ok from a direct html

It's working now hehe.

I have a question though... you said the html parser closes the form because it doens't know about the second block, and I understand this is what was happening and the reason the form was not working.

But, in the second example, without AJAX, it also closed the form in the first block, as it can be seen in Firebug. Why is it working in one case and not in the other? There must be something else "behind the scenes"?.
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009
Sep 30th, 2009
0

Re: Simple form not working through Ajax, works ok from a direct html

I didn't realise that it wasn't working in the non-AJAX example (I probably misread your post).

I can't pretend to understand. My best guess is that the "derived" HTML that Firebug shows and the DOM that FF actually builds are not always 100% compatible one with the other. In other words Firebug and the FF parser are probably separate processes based on the same source HTML stream and do not necessarily come to the same conclusions.

With emshasis that this is just a guess.

Airshow
Sponsor
Reputation Points: 318
Solved Threads: 358
WiFi Lounge Lizard
Airshow is offline Offline
2,527 posts
since Apr 2009
Oct 1st, 2009
0

Re: Simple form not working through Ajax, works ok from a direct html

Yes the non-AJAX example was working fine. And the AJAX example failed. But both showed the same html code in Firebug, both closing the /form in the first block and not the second.

I take your guess as good explanation, thanks
Reputation Points: 10
Solved Threads: 0
Junior Poster in Training
Altairzq is offline Offline
52 posts
since Aug 2009

This thread is solved

Either the thread starter or a moderator has marked this thread as solved. You can most likely trust the responses and answers given. There is most likely no reason for any further responses to be posted here. If you have a related question, please start a new thread in this forum instead.

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: cancelling jquery timeouts
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: help with dynamic table options





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC