我想使用 javascript 添加一个包含输入文本的表单。
添加工作正常,但如果我单击提交按钮,则没有任何反应。
这是代码:
if (document.getElementById("run_name_query_box") == null) {
var run_name_search = '<fieldset id="run_name_query_box">' +
'<table> <td><tr>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<form method="post" action=query name="query_runname_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ' +
'</form>' +
'</tr></td></table>' +
'</fieldset>';
$("#query_type_box").append(run_name_search);
}
run_name_querycreator()
函数设置输入的值。
我已经在其他地方使用了几乎相同的东西并且在那里工作:
'<form method="post" action=query name="query">' +
'<input style="font-size:14px" value = "Search Database" onclick = "combine_query()" id="search" type="submit" name="search" >' +
'</form>'
如果我将纯 html 部分复制到主 html 正文中,它也可以工作。 这是金字塔界面中使用的 mako 文件的全部部分。
最佳答案
我认为您的 HTML 格式不正确。我不认为表单元素可以是表元素的子元素。
你的代码应该是这样的,
var run_name_search = '<fieldset id="run_name_query_box">' +
'<form method="post" action=query name="query_runname_name">' +
'<table>'+
'<tr><td>' +
'<p style="font-size:16px"> Runname:</p>' +
'<input type="text" style="font-size:16px" id="run_name">' +
'<input style="font-size:14px" value="Search Database" onclick= "run_name_querycreator()" id="search_run_name_id" type="submit" name="search_run_name_name"> ';
$("#query_type_box").append(run_name_search);
这是您的代码生成的 HTML,
<fieldset id="run_name_query_box">
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
<table>
<tbody>
<tr>
<td></td>
</tr>
<tr>
<form method="post" action="query" name="query_runname_name"></form>
</tr>
</tbody>
</table>
</fieldset>
您的 <form>
中没有表单元素. (包括您的表单 submit
按钮)。那么它将如何运作?
您的代码应该生成这样的 HTML 才能工作,
<fieldset id="run_name_query_box">
<form method="post" action="query" name="query_runname_name">
<table>
<tbody>
<tr>
<td>
<p style="font-size:16px">Runname:</p>
<input style="font-size:16px" id="run_name" type="text">
<input style="font-size:14px" value="Search Database" onclick="run_name_querycreator()" id="search_run_name_id" name="search_run_name_name" type="submit">
</td>
</tr>
</tbody>
</table>
</form>
</fieldset>
查看此 FIDDLE
在这个 fiddle 中,您可以看到您生成的BEFORE FIX 部分动态元素。 在 AFTER FIX 部分,您可以看到正确的 html 格式。
仅供引用,当您使用动态 html 时,请检查您是否在开发人员工具中动态创建了 html。
关于JavaScript 添加 HTML Form 不提交,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23104071/