在HTML中动态添加表单

Question

I'm trying to code this form in sharing.html so that when one is done putting in information and want to add more contacts, they can click on "add another contact" but when I tried to write out the code, the dreamweaver I was using said that there's a error in Javascript. I don't know how I can fix this error: (the script is almost at the bottom)

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

I based this code on that tutorial: http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/ .

Also you can check out full code at http://hamzakhan.name/dev/eric/options_innerpage/sharing.html

For a quicker look, here is the script in question:

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

Answer 1

Here is the new code:

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++;
}

You need to delete all invisible characters. You can't "newline" string.