Question

我正面临一个问题。我有一个生成表单的javascript函数（使用函数append()）。我基本上试图用提交按钮创建一个表单，当按下这个按钮时，会调用一个php函数，负责做一些事情。但是，它不起作用，当我按下提交按钮时，没有任何反应。

尽管如此，我知道这段代码确实有用，因为我在一个空项目上运行它，而没有使用函数append()。

我的一些问题是：使用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>") }动态生成表单会阻止我的php文件被调用吗？如果确实如此，有没有办法让它发挥作用？如果没有，任何想法为什么它不工作以及如何用另一种方式做到这一点？

以下是javascript代码：

echo "lol";

PS：php文件只包含OR，用于测试。

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>")
}

Answer 2

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

自动关闭<form>代码
因为尝试解析无效的HTML而抛出错误。

相反，您希望对append()进行1次调用，然后在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>

动态创建表单

2 个答案: