AJAX

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

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

Thread Solved

•

Join Date: Aug 2009

Posts: 35

Reputation: Altairzq is an unknown quantity at this point

Solved Threads: 0

Altairzq

Offline

Light Poster

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

-1

Sep 29th, 2009

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):

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
$quadrePrincipal=$quadrePrincipal."
  <div id=\"uploadI\">
    <form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
      <fieldset>
        <INPUT name=\"comentari\" type=\"text\"><br />
      </fieldset>
  </div>";
 
$informacio=$informacio."
      <fieldset>
        <input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
      </fieldset>
    </form>";
$quadrePrincipal=$quadrePrincipal."
  <div id=\"uploadI\">
    <form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
      <fieldset>
        <INPUT name=\"comentari\" type=\"text\"><br />
      </fieldset>
  </div>";

$informacio=$informacio."
      <fieldset>
        <input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
      </fieldset>
    </form>";

This is the test in a simple html document:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" media="all" href="../css/editora.css" />
 
<title>Test Form</title>
</head>
<body>
<table>
  <tr>
    <td id="quadrePrincipal">
      <div id="uploadI">
        <form action="testForm.php" method="post" enctype="multipart/form-data">
          <fieldset>
            <INPUT name="comentari" type="text"><br />
          </fieldset>
      </div>
    </td>
    <td id="informacio">
          <fieldset>
            <input type="submit" name="submitBtn" class="sbtn" value="Alta ficha" /><br />
          </fieldset>
        </form>
    </td>
   </tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" media="all" href="../css/editora.css" />

<title>Test Form</title>
</head>
<body>
<table>
  <tr>
    <td id="quadrePrincipal">
      <div id="uploadI">
        <form action="testForm.php" method="post" enctype="multipart/form-data">
          <fieldset>
            <INPUT name="comentari" type="text"><br />
          </fieldset>
      </div>
    </td>
    <td id="informacio">
          <fieldset>
            <input type="submit" name="submitBtn" class="sbtn" value="Alta ficha" /><br />
          </fieldset>
        </form>
    </td>
   </tr>
</table>
</body>
</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)
[img]http://img87.imageshack.us/img87/9649/ajaxdirect.th.gif[/img]

Smoke is coming out from my head right now

Last edited by Altairzq; Sep 29th, 2009 at 2:41 pm.

•

Join Date: Apr 2009

Posts: 822

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

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

Sep 29th, 2009

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.

 Help with Code Tags 
 HTML Syntax (Toggle Plain Text) 
$xxx = "<form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
<table>
<tr>
<td id=\"quadrePrincipal\">
<div id=\"uploadI\">
<fieldset>
<INPUT name=\"comentari\" type=\"text\"><br />
</fieldset>
</div>
</td>
<td id=\"informacio\">
<fieldset>
<input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
</fieldset>
</td>
</tr>
</table>
</form>"
$xxx = "<form action=\"testForm.php\" method=\"post\" enctype=\"multipart/form-data\">
<table>
<tr>
<td id=\"quadrePrincipal\">
<div id=\"uploadI\">
<fieldset>
<INPUT name=\"comentari\" type=\"text\"><br />
</fieldset>
</div>
</td>
<td id=\"informacio\">
<fieldset>
<input type=\"submit\" name=\"submitBtn\" class=\"sbtn\" value=\"Alta ficha\" /><br />
</fieldset>
</td>
</tr>
</table>
</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.

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2009

Posts: 35

Reputation: Altairzq is an unknown quantity at this point

Solved Threads: 0

Altairzq

Offline

Light Poster

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

Sep 29th, 2009

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...

•

Join Date: Aug 2009

Posts: 35

Reputation: Altairzq is an unknown quantity at this point

Solved Threads: 0

Altairzq

Offline

Light Poster

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

Sep 30th, 2009

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"?.

•

Join Date: Apr 2009

Posts: 822

Reputation: Airshow is on a distinguished road

Solved Threads: 116

Airshow

Offline

Practically a Posting Shark

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

Sep 30th, 2009

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

50% of the solution lies in accurately describing the problem!

•

Join Date: Aug 2009

Posts: 35

Reputation: Altairzq is an unknown quantity at this point

Solved Threads: 0

Altairzq

Offline

Light Poster

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

Oct 1st, 2009

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