estoy armando un formulario de votaciones lo cual estoy teniendo problemas al querer crear solo 5 campos input text mediante javascript
<form id="formAltaTest" method="POST" class="mainForm">
<fieldset>
<div class="rowElem noborder allUpperFull">
<div class="body" style="padding-bottom:20px;">
<label>Tema: </label>
<input type='hidden' value='<?php echo $bId ?>' name='bIdTest' id='bIdTest'/>
<input type="text" name="temaTest" id="temaTest" placeholder="Tema" maxlength="200" style="width: 200px;"/>
</div>
</div>
<div class="rowElem">
<div class="body" style="padding-bottom:20px;">
<label>N. de opciones: </label>
<input type="text" id="num_opc" name="num_opc" onChange="validarSiNumero(this.value);" value="0" style="width: 100px;">
<a href="#" id="numOpc" onclick="addFields()"><img width="18" height="18" src="images/icons/notifications/add.png"></a> (max. 5)
<div class="rowElem">
<br>
<div id="ag_opcionales"/></div>
<div class="fix"></div>
</div>
</div>
</div>
<div class="rowElem">
<div class="body" style="padding-bottom:20px;">
<label>Aclaraciones:</label>
<textarea rows="3" cols="" name="aclaracionTest" id="aclaracionTest" maxlength="500" style="width: 300px;"></textarea>
</div>
<div class="fix"></div>
</div>
<div class="rowElem">
<input type="button" id='altaVotacionTest' class="greenBtn" style='float:right;margin:10px;' name="confirmarTemaTest" value="Confirmar" />
<div class="fix"></div>
</div>
<div class="fix"></div>
<fieldset>
</form>
Como veran la imagen al hacerle click crea un input text, por lo cual eso esta bien, pero si pones un número mayor 5 igual crea campo, es decir que solo quiero que se creen 5 input como mucho.
Aquí dejo el javascript
<script type='text/javascript'>
function addFields(){
// Número de INPUT Text que se crearan
var number = document.getElementById("num_opc").value;
// div donde se colocará el contenido dinámico en este caso ag_opcionales
var container = document.getElementById("ag_opcionales");
// Borra los contenidos anteriores del div.
while (container.hasChildNodes()) {
container.removeChild(container.lastChild);
}
if (!/^([0-5])*$/.test(numero)) {
jAlert("Solo se puede crear 5 opciones");
$('#num_opc').focus();
return false;
}else{
for (i=0;i<number;i++){
// Añadir un nodo con un texto aleatorio.
container.appendChild(document.createTextNode("Opción " + (i+1) + ":"));
// Crea un elemento input estableciendo tipo y nombre.
var input = document.createElement("input");
input.type = "text";
input.placeholder = "Coloque su respuesta personalizada";
input.name = "number_opc" + i;
container.appendChild(input);
// Crea un salto de linea, para que se vea mas bonito.
container.appendChild(document.createElement("br"));
}
}
}
function validarSiNumero(numero){
//Crea un alerta cuando se coloca una letra y no un número en el input.
if (!/^([0-9])*$/.test(numero))
jAlert("El valor " + numero + " no es un número");
}
</script>
Intente con ese IF pero tira error al decir que numero no es una variable, y que no se encuentra, pero si la cambio por la variable de num_opc cualquier número que coloque me tira el alert.
A lo que voy y lo que quiero hacer es cuando se coloque por ej un número mayor a 5 en el input num_opc, y se haga click en la imagen este tire un alert avisando que solo se pueden crear 5 input text.