表单按钮在JS中动态添加答案

【问题标题】：Form button add dynamically in JS表单按钮在JS中动态添加
【发布时间】：2015-12-29 18:48:14
【问题描述】：

我尝试在 JavaScript 中动态添加表单，但是当我单击提交按钮时没有任何反应。我知道这是因为按钮没有侦听器，但我不知道必须在侦听器中添加什么才能正常发送按钮行为。

这是我的一些代码

document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("partTwo").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("partTwo").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>T&eacute;l&eacute;charger le rapport</button>";
document.getElementById("partTwo").innerHTML += "</form>";

我希望听众将表格发送到我的client.process.php

我知道这是一个初学者问题，但我们将不胜感激。谢谢

【问题讨论】：

标签： javascript forms button listener

【解决方案1】：

Working fiddle.

您应该在 form 内而不是在 div partTwo 内添加输入，所以您的代码应该是这样的：

document.getElementById("partTwo").innerHTML += "<form id='download_report' method='post' class='form-horizontal' role='form' action='include/client.process.php'>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='jobid' value='" + jobId + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='job' value='" + job_details.heavyInfosJson + "'/>";
document.getElementById("download_report").innerHTML += "<input type='hidden' name='download_report' value='1'/>";
document.getElementById("download_report").innerHTML += "<button id='download_report_button' type='submit' class='btn btn-default btn-xs'>T&eacute;l&eacute;charger le rapport</button>";

希望这会有所帮助。

【讨论】：

好的，我明白了，但你确定最后一个元素吗？它将是 document.getElementById("partTwo").innerHTML += "";没有？
没有冠军，表格是自动关闭的。
所以如果我接受得很好，我不需要在按钮上添加监听器吗？即使是动态创建的按钮行为也是正确的？
是的，按钮中的type='submit' 告诉他它应该提交父表单。
建议 sybmit 类型的按钮将导致页面重新加载。如果您不想重新加载页面 - 就像在 SPA 中一样，您需要使用按钮侦听器。

【解决方案2】：

问题是<form> 标签是自动关闭的。 innerHTML 返回格式良好的 html。见this question

【讨论】：

这一点，但实际上问题是当输入应该在表单内时，将整个标签附加到同一级别，请检查我的答案。
@Zakaria Acharki 我同意你的看法。我提供了原因，您提供了解决方案。完美的工作！ :)

【解决方案3】：

您应该考虑使用createElement 而不是innerHTML，请参阅2946656

这是一个如何创建表单并将其附加到页面的基本示例：

var form = document.createElement("form");
form.setAttribute('action', 'contact.php');
form.setAttribute('method', 'POST');

var inputField = document.createElement("input");
inputField.setAttribute('value', 'example');
form.appendChild(inputField);

document.body.appendChild(form);

【讨论】：