Generating new form with javascript with onclick of button

Question

I am trying to let my user to generate a form for adding team member as much as they need automatically by JavaScript and w3c dom. but it is not working.

Here is my JavaScript function and also the html page and the form I am trying to generate:

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>

Nathaniel · Accepted Answer · 2016-04-06 18:08:17Z

2

There is no element with id = "teamform". You need to change name="teamform" to id="teamform" in your html.

To see this kind of problem, it's usually easiest to try running your code in Chrome or some other browser that has a Developer Tools, and opening up the debugger console to see how your code is failing.

answered Apr 6, 2016 at 18:08

Nathaniel

886 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ananthaprakash · Accepted Answer · 2016-04-06 18:06:45Z

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>

Collectives™ on Stack Overflow

Generating new form with javascript with onclick of button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related