Creating input automatically limiting in 5

Question

Creating input automatically limiting in 5

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

I am creating two input fields when I click the plus (+) button, I can already generate the two inputs, but I need to limit the input, I only need 5 input, I tried with while and I did not succeed, Thank you

/ creates more additive value fields and number of plots /

function duplicarCampos(){  
    var clone = document.getElementById('origem').cloneNode(true);  
    var destino = document.getElementById('destino');  
    destino.appendChild (clone);  

    var camposClonados = clone.getElementsByTagName('input');  

    for(i=0; i<camposClonados.length;i++){  
        camposClonados[i].value = '';  
    }  

}  

    <tr>
            <td colspan="4">
                <div align="center" style="font-size:12px;background: #FFDAB9;border: 1px solid rgb(161, 161, 161) " id="origem"  > 
                    <br>
                    Valor do Aditívo (R$):  <input type="text" id="tco_valor_aditivo_new" name="tco_valor_aditivo_new[]"  maxlength="14" size="14"/><br>
                    <br>
                    Número de Parcelas:
                    <select name="tco_num_parcelas" id="tco_num_parcelas" >
                        <option value="...">...</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                    </select>
                    <p>
                    <button type="button" style="cursor: pointer;" onclick="duplicarCampos();">+</button>
                    <button type="button" style="cursor: pointer;" onclick="removerCampos(this);">-</button>
                    <p><p><p>
                </div> 
            <div id="destino"></div> 
            </td>
        </tr>

javascript html jquery

asked by anonymous 06.11.2014 / 16:55

2 answers

3

Try to do the following, add a date attribute on your button.

<button type="button" data-index="0" style="cursor: pointer;" onclick="removerCampos(this);">-</button>


function duplicarCampos(event){  
    var clone = document.getElementById('origem').cloneNode(true);  
    var destino = document.getElementById('destino');  
    destino.appendChild (clone);
    var dataIndex = event.getAttribute("data-index");

    if(dataIndex > 5){
       var camposClonados = clone.getElementsByTagName('input');

       for(i=0; i<camposClonados.length;i++){  
          camposClonados[i].value = '';  
       } 
    }
    dataIndex++;
    event.setAttribute("data-index",dataIndex);
}

06.11.2014 / 17:18

How to change the color of a row in the DataGrid in C #? Can Webservice set a limit memory usage for the user?

score 1 · Accepted Answer

You can fetch the number of inputs within a parent element. For example, find the number of inputs within the div "destination".

Example:

function duplicarCampos(){ 
   var count = $("#destino input").length;
   if (count <= 5) {
      var clone = document.getElementById('origem').cloneNode(true);  
      var destino = document.getElementById('destino');  
      destino.appendChild (clone);  
   }
   var camposClonados = clone.getElementsByTagName('input');  
}