动态创建表单

Question

我遇到了一个问题。我有一个JavaScript函数，用于生成表单（使用append()函数）。我正在尝试创建带有提交按钮的表单，当用户按下此按钮时，调用PHP函数进行一些处理。但是，当我按下提交按钮时，什么都不会发生。 虽然我知道这段代码实际上是有效的，因为我在一个空项目上运行了它，并且没有使用append()函数。

那么我的问题是：使用append()动态生成表单是否会阻止我的PHP文件被调用？如果是，有方法可以使其正常工作吗？如果不是，请问为什么不起作用，并提供另一种实现方式？

以下是JavaScript代码：

function create_user() {
  var id = document.getElementById("right-well");
  $(id).empty().append("<h1 class='title'>Users</h1>");
  $(id).append("<div class='line-title'></div>");
  $(id).append("<div class='add-user'>Add User</div>");
  $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'>");
  $(id).append("<h4 class='user-name-text'> Name :</h4>");
  $(id).append("<h4 class='user-mail-text'> E-mail :</h4>");
  $(id).append("<h4 class='user-status-text'> Status :</h4>");
  $(id).append("<h4 class='user-picture-text'> Picture :</h4>");
  $(id).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>")
  $(id).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>")
  $(id).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>")
  $(id).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>")
  $(id).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>")
  $(id).append("</form>")
}  

PS: 这个php文件只包含一个echo "lol";，用于测试。

- souki

---

无论表单是如何创建的，都必须是有效的。你的策略看起来有些“滑稽”。我建议你使用浏览器开发控制台查看实际创建的HTML源代码... - arkascha

你了解 AJAX 吗？ - Hoyen

是的，我只是想知道为什么。虽然不使用append()也可以正常工作，但我想知道它是否相关。 - souki

@arkascha 我已经检查了控制台，但它没有显示任何关于可能的错误的信息。 - souki

那不是我所询问的。我指的是您创建的表单结构，即HTML源代码。 - arkascha

Answer 1

这里的问题在于添加到form元素之后的元素被视为form的兄弟元素，而不是子元素。以下是一种解决方法：

function create_user() {
  var id = document.getElementById("right-well");
  $(id).empty().append("<h1 class='title'>Users</h1>");
  $(id).append("<div class='line-title'></div>");
  $(id).append("<div class='add-user'>Add User</div>");
  $(id).append("<form action='../upload.php' method='post' enctype='multipart/form-data'></form>");

  var form = $(id).find("form");

  $(form).append("<h4 class='user-name-text'> Name :</h4>");
  $(form).append("<h4 class='user-mail-text'> E-mail :</h4>");
  $(form).append("<h4 class='user-status-text'> Status :</h4>");
  $(form).append("<h4 class='user-picture-text'> Picture :</h4>");
  $(form).append("<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>")
  $(form).append("<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>")
  $(form).append("<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>")
  $(form).append("<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>")
  $(form).append("<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>")
}

- Alex.S

Answer 2

实际上，问题在于append()方法如何将HTML添加到页面的文档树中。如果您在单个调用中附加损坏或不完整的HTML，则浏览器必须执行某些操作来修复它。例如，您在一个调用中附加了开放的<form>标签，然后在最后一个调用中附加了关闭标签。这会创建一个不平衡的文档树。浏览器有几个选择：

1. 自动关闭<form>标签
2. 抛出错误，因为它正在尝试解析无效的HTML。

相反，您要进行1次append()调用，并在JavaScript中连接字符串之前：

function create_user() {
  var $id = $("#right-well"),
      markup = [
        "<h1 class='title'>Users</h1>",
        "<div class='line-title'></div>",
        "<div class='add-user'>Add User</div>",
        "<form action='../upload.php' method='post' enctype='multipart/form-data'>",
          "<h4 class='user-name-text'> Name :</h4>",
          "<h4 class='user-mail-text'> E-mail :</h4>",
          "<h4 class='user-status-text'> Status :</h4>",
          "<h4 class='user-picture-text'> Picture :</h4>",
          "<input class='user-name-input' id='new_user_name' placeholder='Name...'></input>",
          "<input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>",
          "<input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>",
          "<input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>",
          "<button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>",
        "</form>"
      ];

  $id.empty()
     .append(markup.join(""));
}

现在浏览器可以解析格式正确的HTML。

另一种选择是在<script>标签内使用客户端模板：

<script type="text/javascript">
    function create_user() {
      var $id = $("#right-well"),
          markup = document.getElementById("add-user-template").innerHTML;

      $id.empty()
         .append(markup);
    }
</script>

<script type="text/html" id="add-user-template">
  <h1 class='title'>Users</h1>
  <div class='line-title'></div>
  <div class='add-user'>Add User</div>
  <form action='../upload.php' method='post' enctype='multipart/form-data'>
    <h4 class='user-name-text'> Name :</h4>
    <h4 class='user-mail-text'> E-mail :</h4>
    <h4 class='user-status-text'> Status :</h4>
    <h4 class='user-picture-text'> Picture :</h4>
    <input class='user-name-input' id='new_user_name' placeholder='Name...'></input>
    <input class='user-mail-input' id='new_user_mail' placeholder='E-mail...' onblur='check_email();'></input>
    <input class='user-status-input' id='new_user_status' onblur='check_status();' placeholder='Status...'></input>
    <input type='file' class='user-picture-button' id='new_user_picture' onblur='check_picture();'></input>
    <button type='submit' name='fileToUpload' class='validate-button' onclick='validate_new_user();'>Save</button>
  </form>
</script>

- Greg Burghardt