How do I make forms generated from AJAX work?

Question

I have two files: test.html and forms.html

test.html has a button that requests for forms.html via AJAX.

forms.html is a set of forms. I generate these forms dynamically in my environment, but just for demo purposes, I made it static in this example.

I place the forms from forms.html into a div placeholder in test.html.

The problem is that the forms do not work. The submit buttons do not work. The reset buttons do not work.

When I open forms.html on its own though, the forms seem to be working fine. The submit buttons work. The reset buttons work.

How do I make the forms work inside test.html?

Here is test.html:

<html>

<head>
  <title>test</title>
  <script type="text/javascript">
    function displayForms() {
      document.getElementById("formPlaceholder").innerHTML = "Retreiving forms... ";
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          document.getElementById("formPlaceholder").innerHTML = this.responseText;
        }
      };
      xhttp.open("GET", "forms.html", false);
      xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      xhttp.send();
      return true;
    }
  </script>
</head>

<body>
  <center>
    <button type="submit" onclick="return displayForms();">Display Forms</button>
  </center>
  <div id="formPlaceholder" align="center"></div>
</body>

</html>

Here is forms.html

<table>
  <tr>
    <form name="someform" method="post" action="someaction.php">
      <td><input type="text" name="somefield" /></td>
      <td><button type="submit">Submit</button></td>
      <td><input type="reset" value="Reset" /></td>
    </form>
  </tr>
  <tr>
    <form name="someform" method="post" action="someaction.php">
      <td><input type="text" name="somefield" /></td>
      <td><button type="submit">Submit</button></td>
      <td><input type="reset" value="Reset" /></td>
    </form>
  </tr>
  <tr>
    <form name="someform" method="post" action="someaction.php">
      <td><input type="text" name="somefield" /></td>
      <td><button type="submit">Submit</button></td>
      <td><input type="reset" value="Reset" /></td>
    </form>
  </tr>
</table>

score 0 · Answer 1 · answered Oct 12 '21 at 14:30

Turns out tables can't have forms as children. I got the answer from this very old post c/o @Quentin.

So I used HTML5's form attribute also suggested by @Quentin.

I edited forms.html to this:

<form name="someform0" id="someform0" method="post" action="someaction.php">
<form name="someform1" id="someform1" method="post" action="someaction.php">
<form name="someform2" id="someform2" method="post" action="someaction.php">
<table>
  <tr>
    <td><input type="text" name="somefield" form="someform0"/></td>
    <td><button type="submit" form="someform0">Submit</button></td>
    <td><input type="reset" value="Reset" form="someform0"/></td>
  </tr>
  <tr>
    <td><input type="text" name="somefield"  form="someform1"/></td>
    <td><button type="submit" form="someform1">Submit</button></td>
    <td><input type="reset" value="Reset" form="someform1"/></td>
  </tr>
  <tr>
    <td><input type="text" name="somefield" form="someform2"/></td>
    <td><button type="submit" form="someform2">Submit</button></td>
    <td><input type="reset" value="Reset" form="someform2"/></td>
  </tr>
</table>

How do I make forms generated from AJAX work?

1 Answers1