点击按钮，用javascript生成新表单

Generating new form with javascript with onclick of button

本文关键字：新表单 表单 按钮 javascript      更新时间：2024-02-13

我正试图让我的用户生成一个表单，以便通过JavaScript和w3c-dom自动添加所需的团队成员。但它不起作用。

这是我的JavaScript函数，还有html页面和我试图生成的表单：

var counter = 0;
function member_card()
{
    counter++;
    var newFields = document.getElementById('teamform').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('addform');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = member_card;
<section class="container" xmlns="http://www.w3.org/1999/html">
        <div class="row addform">
            <div class="col-md-6 addform-col">
                <div class="row input-field">
                    <div class="col-md-4">
                        <label class="add-lable">Team Member<spna style="color:red">*</spna></label>
                    </div>
                        <div name="teamform" class="col-md-6" style="display: none">
                            <form>
                            <div name="imageholder" class="row tm-image-holder">
                                <div class="col-md-12"><div style="background-image: url(../img/DSC_3305.jpg);" class="tm-img"></div></div>
                            </div>
                            <a name="photo" href="#" class="btn btn-block btn-lg btn-primary inout-margin mybut"><span class="glyphicon glyphicon-search"></span> Browse Photo</a>
                            <input name="name" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *">
                            <input name="job" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *">
                            <textarea name="explain" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea>
                            </form>
                        </div>
                    <form method="post" action="">
                        <input type="button" id="member_card" value="Give me more fields!" />
                    </form>
                </div>
            </div>
        </div>
    </section>

没有id="teamform"的元素。你需要改变name="teamform"至id="teamform"在您的html中。

要解决这类问题，通常最简单的方法是尝试在Chrome或其他具有开发工具的浏览器中运行代码，然后打开调试器控制台查看代码的失败情况。

var counter = 0;
function member_card()
{
    counter++;
    debugger;
    var newFields = document.getElementById('teamform').cloneNode(true);
    newFields.id = '';
    newFields.style.display = 'block';
    var newField = newFields.childNodes;
    for (var i=0;i<newField.length;i++) {
        var theName = newField[i].name
		if (theName)
			newField[i].name = theName + counter;
    }
    var insertHere = document.getElementById('addform');
	insertHere.parentNode.insertBefore(newFields,insertHere);
}
window.onload = member_card;
<section class="container" xmlns="http://www.w3.org/1999/html">
        <div class="row addform" id="addform">
            <div class="col-md-6 addform-col">
                <div class="row input-field">
                    <div class="col-md-4">
                        <label class="add-lable">Team Member<spna style="color:red">*</spna></label>
                    </div>
                        <div id="teamform" class="col-md-6" style="display: none">
                            <form>
                            <div name="imageholder" class="row tm-image-holder">
                                <div class="col-md-12"><div style="background-image: url(../img/DSC_3305.jpg);" class="tm-img"></div></div>
                            </div>
                            <a name="photo" href="#" class="btn btn-block btn-lg btn-primary inout-margin mybut"><span class="glyphicon glyphicon-search"></span> Browse Photo</a>
                            <input name="name" type="text" class="add-input input-margin" placeholder="Name, Mohammad, ... *">
                            <input name="job" type="text" class="add-input" placeholder="Job, Developer, Designer, ... *">
                            <textarea name="explain" class="add-textarea input-margin" rows="4" placeholder="Explain this member in 2 to 4 lines *"></textarea>
                            </form>
                        </div>
                    <form method="post" action="">
                        <input type="button" id="member_card" value="Give me more fields!" />
                    </form>
                </div>
            </div>
        </div>
    </section>

相关文章：