在HTML中动态添加表单

时间:2015-05-27 21:22:29

标签: javascript html forms

我正在尝试在sharing.html中对此表单进行编码,以便在完成信息并希望添加更多联系人时,他们可以点击“添加其他联系人”,但当我尝试写出代码时,我正在使用的Dreamweaver说Javascript中有错误。我不知道如何解决这个错误:(脚本几乎在底部)

    <div class="recordsbox">
            <h1>Sharing Center</h1>
            <p>Please enter the contact information that you want to share.</p>
            <div id="shareform">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
            <div class="addcontact">
                <input type="button" value="Add another contact?" onClick="addForm('shareform');">
            </div>
            <script>
            var shareform = 0; 
                function addForm(divName) {
                    shareform++;
                    var newform = document.createElement('div');
                    newform.innerHTML = '<div id="shareform'+shareform+'">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
';
                    document.getElementById(divName).appendChild(newform);
                    shareform++;
                }
            </script>
            <div class="nextbutton">
            <a href="#">Next</a>
            </div>
        </div>

我将此代码基于该教程:http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/

您也可以在http://hamzakhan.name/dev/eric/options_innerpage/sharing.html

查看完整代码

为了更快地看一下,这是有问题的脚本:

    <script>
            var shareform = 0; 
                function addForm(divName) {
                    shareform++;
                    var newform = document.createElement('div');
                    newform.innerHTML = '<div id="shareform'+shareform+'">
            <form id="share" method="POST">
                 <div class="notifyfield">
                <label>Who is this person?</label>
                <input type="text">
                </div>
                <div class="notifyfield">
                <label>Email Address:</label>
                <input type="email" >
                </div>
                <div class="notifyfield">
                <label>Phone Number:</label>
                <input type="tel" >
                </div>
            </form>
            </div>
';
                    document.getElementById(divName).appendChild(newform);
                    shareform++;
                }
            </script>

1 个答案:

答案 0 :(得分:1)

这是新代码:

var shareform = 0; 
function addForm(divName) {
  shareform++;
  var newform = document.createElement('div');
  newform.innerHTML = '<div id="shareform'+shareform+'"><form id="share" method="POST"><div class="notifyfield2"><div class="sharefield"><label>Who is this person?</label><input type="text"></div></div><div class="notifyfield"><label>Email Address:</label><input type="email" ></div><div class="notifyfield"><label>Phone Number:</label><input type="tel" ></div></form><hr class="greenline"></div>';
  document.getElementById(divName).appendChild(newform);
  shareform++;
}

您需要删除所有不可见的字符。你不能&#34;换行&#34;串。