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

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

<!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 :confused:

Recommended Answers

All 5 Replies

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.

$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

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

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

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

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.