JavaScript

Adicionar e remover input's

Publicado por antlou em 12/06/2015

Este útil e pequeno script client-side adiciona e remove caixas de texto (input).

Resultado:

Input 1 :

Vou então expôr o código por partes, começando pelo javascript.

add_input_js.js


/*
    ********************************************
    * Add and remove input box (javascript)                                     
    * Author:antlou                            
    * Version:1.0                              
    * Date:04/06/2015                          
    ********************************************
    */
    
$(document).ready(function(){
    var counter = 2;
    $("#addButton").click(function () {
    if(counter>5){
            alert("Apenas 5 ficheiros permitidos");
            return false;
    }   
    var newFileDiv = $(document.createElement('div'))
         .attr("id", 'FileDiv' + counter);
 
    newFileDiv.after().html('<label id="texto">Ficheiro '+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + 
          '" id="filebox' + counter + '" value="" >');
 
    newFileDiv.appendTo("#FilesGroup");
    counter++;
     });
     
     $("#removeButton").click(function () {
    if(counter==1){
          alert("Não tem ficheiros para remover");
          return false;
       }   
    counter--;
 
        $("#FileDiv" + counter).remove();
     });
     $("#getButtonValue").click(function () {
 
    var msg = '';
    for(i=1; i<counter; i++){
         msg += "\n Ficheiro " + i + " : " + $('#textbox' + i).val();
    }
          alert(msg);
     });
  });

add_input.html


<html>
<head>
    <title>add/remove inputs</title>
    <script type="text/javascript" src="jquery-2.0.2.js"></script>
    <script type="text/javascript" src="add_input_js.js"></script>
</head>
<body>
 
<div id='FilesGroup'>
    <div id="FileDiv1">    
        <label id="texto"> Ficheiro 1 : </label>
        <input  class="box" type='text' id='filebox1' >
    </div>
</div>
<input type='button' value='+ Ficheiros' id='addButton'>
<input type='button' value='Remover Ficheiro' id='removeButton'>

</body>
</html>

voltar ao topo ↑

Download Código

Espero ter sido útil. Deixe avaliação ao script.

1 votos - 5 pontos - 9 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.