我正在构建一种形式。
尝试将按钮插入使用javascript动态创建的新div中。显然,代码不起作用,因为创建的新div是创建它的函数内的局部变量。
没有附加按钮,代码工作正常。 这个想法是附加按钮添加了Form的原始输入类型的额外输入。
有关如何实现这一目标的任何建议?
HTML:
<div id="dynamicInputs">
</div>
Título de la pregunta: <input name="qName" type="text"><br>
Tipo: <select name="inputSelect">
<option value="text">Respuesta corta</option>
<option value="radio">Selección múltiple</option>
<option value="checkbox">Checkboxes</option>
<option value="textarea">Desarrollo</option>
</select><br>
<input type="button" class="btn btn-default btn-sm" value="Agregar pregunta" onclick="addAllInputs('dynamicInputs', document.myForm.qName.value, document.myForm.inputSelect.value)">
使用Javascript:
//agegar pregunta en formulario
var counterDynInput = 0;
function addAllInputs(divName, qName, inputType){
var newDiv = document.createElement('div');
var newDivName = "";
newDivName = "divInputs_" + (counterDynInput + 1);
newDiv.setAttribute("id", newDivName);
newDiv.innerHTML =
(counterDynInput + 1)
+ ". "
+ inputLabel(qName)
+ "<br>"
+ inputFields(inputType)
+ "<hr>";
addButtonToDiv(newDivName);
counterDynInput++;
document.getElementById(divName).appendChild(newDiv);
}
function inputLabel(qName){
var putStr = "";
putStr = "<input type='text' name='qLabel' value='" + qName + "' placeholder='Título de la pregunta...'>";
return putStr;
}
function inputFields(inputType){
var putStr = "";
putStr = "<input type='" + inputType + "' name='myInputs[]'><br>";
return putStr;
}
function addButtonToDiv(newDivName){
var btn = document.createElement('BUTTON');
var div = document.getElementById(newDivName);
div.appendChild(btn);
}