我想要创建一个添加新表单的按钮

Question

首先，我显示了一个表单，我希望我的用户能够在同一个页面中添加一个新表单。所以我想要创建一个按钮来添加一个新的表单。

[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>

Answer 1

wordpress读取您的简短代码以创建HTML表单(服务器端)。

您的javavscript操作是客户端的，因此wordpress无法读取它来创建表单。

一种解决方案可能是创建表单，并在默认情况下隐藏它。但你是用户，就不能创造出他想要的多少形式。或者用ajax加载表单(不知道wordpress，也不确定)，但有点困难。

Answer 2

<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>