2

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.

1 respuesta 1

2

El valor del input#num_opc lo estás guardando en una variable number y no numero como la estás llamando al momento de hacer la comparación, después de cambair esto el código funciona correctamente tal y como lo esperas.

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(number)) {
      alert("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))
     alert("El valor " + numero + " no es un número");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<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>

1
  • Genial, se entendió a la perfección, muchas gracias por tu ayuda!
    – Joaqho C
    Commented el 25 jul. 2019 a las 20:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.