Javascript |按钮未使用 .innerHTML 提交表单
Posted
技术标签:
【中文标题】Javascript |按钮未使用 .innerHTML 提交表单【英文标题】：Javascript | Button is not submitting form with .innerHTML 【发布时间】：2013-07-29 02:33:51 【问题描述】：我对设置 div 的 .innerhtml 的 javascript 函数有疑问。 应该出现在 div 中的 HTML 代码是一个表单。 在我测试了它自己的表单（没有javascript）并且它可以工作之前。它将信息发送到请求的页面。
但是，当我使用 .innerHTML 使表单出现在 div 中时，表单的布局工作正常，但按钮没有提交表单。它什么都不做。
希望你能帮助我。我刚刚开始在我的脑海中得到一些 javascript :-)
function reactieID(a,b,c,d)
document.getElementById('myModal').innerHTML= ('<form name="getTheInfo" method="post" action="actionpage.php">');
document.getElementById('myModal').innerHTML+=('<div class="subtitel">Reactie</div>');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="a" type="text" value="'+a+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="b" type="text" value="'+b+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="c" type="text" value="'+c+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="d" type="text" value="'+d+'" />');
document.getElementById('myModal').innerHTML+=('<input size="80" name="reactie" type="text" class="textfield" />');
document.getElementById('myModal').innerHTML+=('<input type="submit" value="Toevoegen" />');
document.getElementById('myModal').innerHTML+=('</form>');
document.getElementById('myModal').innerHTML+=('<a class="close-reveal-modal">×</a>');
更新：
我尝试在按钮onclick="this.form.submit()" 的行内添加，但这也不起作用:-(
问题解决了！ （感谢 FrostbiteXIII 的帮助）
【问题讨论】：
活动在哪里？？ 【参考方案1】：它不喜欢它的表单标签——如果你把它们放在第一位，我怀疑它会起作用。 :)
例如：
<html>
<head>
<script>
function reactieID(a,b,c,d)
document.getElementById('myModal').innerHTML+=('<div class="subtitel">Reactie</div>');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="a" type="text" value="'+a+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="b" type="text" value="'+b+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="c" type="text" value="'+c+'" />');
document.getElementById('myModal').innerHTML+=('<input hidden="hidden" name="d" type="text" value="'+d+'" />');
document.getElementById('myModal').innerHTML+=('<input size="80" name="reactie" type="text" class="textfield" />');
document.getElementById('myModal').innerHTML+=('<input type="submit" value="Toevoegen" />');
document.getElementById('myModal').innerHTML+=('<a class="close-reveal-modal">×</a>');
</script>
</head>
<body onload="reactieID('a','b','c','d')">
<form name="getTheInfo" method="post" action="actionpage.php">
<div id='myModal'></div>
</form>
</body>
</html>
编辑：您甚至可以先指定表单标签：
<form name="getTheInfo" id="getTheInfo" method="post" action="">
然后将js添加到你上面的函数中以指定要采取的行动，这仍然可以正常工作：
document.getElementById('getTheInfo').action = "actionpage.php";
【讨论】：
【参考方案2】：提供一个 jQuery 方法，将提交按钮与事件绑定，如下所示：
<script>
$(document).on('click', 'input[type="submit"]', function()
var self = $(this);
self.closest('form').submit();
);
</script>
【讨论】：
以上是关于Javascript |按钮未使用 .innerHTML 提交表单的主要内容，如果未能解决你的问题，请参考以下文章