动态创建表单答案

【问题标题】：Create a form dynamically动态创建表单
【发布时间】：2017-01-31 03:32:18
【问题描述】：

我遇到了一个问题。我有一个生成表单的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";，用于测试。

【问题讨论】：

表单的创建方式无关紧要。它必须是有效的。你的策略看起来很“有趣”。我建议您看一下您使用浏览器开发控制台实际创建的 html 源代码...
你了解 AJAX 吗？
是的，我想知道为什么，它在不使用 append() 但不使用它的情况下对我有用。我想知道它是否相关。
@arkascha 我检查了控制台，但它并没有说明最终的错误..
我问的不是这个。我提到了您创建的表单的结构。 HTML 源代码。

标签： javascript php jquery forms

【解决方案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>")
}

【讨论】：

【解决方案2】：

真正的问题是append() 方法实际上如何将HTML 附加到页面上的文档树中。如果您在单个调用中附加损坏或不完整的 HTML，浏览器必须做一些事情来修复它。例如，您在一次调用中附加开始 <form> 标记，然后在最后一次调用中附加结束标记。这会创建一个不平衡的文档树。浏览器有两种选择：

自动关闭<form>标签
抛出错误，因为它试图解析无效的 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>

【讨论】：