JavaScriptとw3c domで自動的に必要なだけチームメンバーを追加するためのフォームをユーザーに生成させようとしています。それは動作していません。ここでボタンのonclickでjavascriptを使って新しいフォームを生成する
は私の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
\t \t if (theName)
\t \t \t newField[i].name = theName + counter;
}
var insertHere = document.getElementById('addform');
\t 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>
スニペットが動作していません。 – Laurens