创建动态表格

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";，进行测试。

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>标签，然后在最后一次呼叫中追加结束标签。这会创建一个不平衡的文档树。该浏览器有几个选择，使：

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>