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

I want create a button that adds a new form

本文关键字：新表单 表单 按钮 添加 一个 创建      更新时间：2023-09-26

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

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

相关文章：