创建动态表格
我正面临一个问题。我有一个生成表单的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";
,进行测试。
这里的问题是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>")
}
真正的问题是如何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>
我感谢您的帮助! :) – souki
不要紧_how_创建形式。它必须是有效的。你的策略看起来很有趣。我建议你看看你使用浏览器开发控制台实际创建的HTML源代码... – arkascha
你知道关于AJAX的任何事吗? – Hoyen
是的,我只想知道为什么,它在为我工作而不使用'append()'但不使用它。我想知道它是否相关。 – souki