我想創建一個按鈕，添加一個新的表單

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>