我想创建一个按钮,添加一个新的表单
问题描述:
首先我显示一个表单,我希望我的用户可以在同一页面添加一个新表单。所以我想创建一个添加新表单的按钮。我想创建一个按钮,添加一个新的表单
[contact-form-7 id="2" title="Form"] <!-- #Form shortcode-->
<input type="button" id="more_fields" onclick="add_fields();" value="Add form" /> <!-- #Form shortcode-->
<script>
function add_fields() {
var d = document.getElementById("content");
d.innerHTML += "[contact-form-7 id='2' title="Form"]";
}
</script>
答
你的短代码被wordpress读取以创建HTML表单(服务器端)。
您的javavscript操作是客户端,所以wordpress无法读取它来创建表单。
一种解决方案可能是创建窗体,并在默认情况下将其隐藏。但是,用户将无法创建他想要的任何形式。 或者也许加载形式在Ajax(不知道wordpress,不知道),但它有点难。
答
<script src="/wp-includes/js/addInput.js" language="Javascript" type="text/javascript"></script>
<form method="POST">
<div id="dynamicInput">
Entry 1<br><input type="text" name="myInputs[]">
</div>
<input type="button" value="Add another text input" onClick="addInput('dynamicInput');">
</form>
<script>
var counter = 1;
var limit = 3;
function addInput(divName){
if (counter == limit) {
alert("You have reached the limit of adding " + counter + " inputs");
}
else {
var newdiv = document.createElement('div');
newdiv.innerHTML = "Entry " + (counter + 1) + " <br><input type='text' name='myInputs[]'>";
document.getElementById(divName).appendChild(newdiv);
counter++;
}
}
</script>