Javascript |按钮未使用 .innerHTML 提交表单答案

【问题标题】：Javascript | Button is not submitting form with .innerHTMLJavascript |按钮未使用 .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">&#215;</a>');}

更新：我尝试在按钮onclick="this.form.submit()" 的行内添加，但这也不起作用:-(

问题解决了！（感谢 FrostbiteXIII 的帮助）

【问题讨论】：

活动在哪里？？

标签： javascript forms button form-submit innerhtml

【解决方案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">&#215;</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>

【讨论】：