1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

  2. Anuncie Aqui ! Entre em contato fdantas@4each.com.br
Cookies Anuncie aqui Patrocinador Anuncios

Adicionar campos dinamicos a um formulario

Discussão em 'WebDesk/ECM' iniciado por rbaselio, Maio 4, 2015.

  1. rbaselio

    rbaselio Membro Participativo

    Gostaria de saber se é possível adicionar campos dinamicamente ao fichário durante o processo de workflow.
    Por exemplo durante o preenchimento o colaborador precise informar uma quantidade não fixada de dados, ao lado do campo texto, é colocado um botão que adiciona mais um campo texto.

    No exemplo abaixo, funciona, porem o ECM não salva os campos extras.
    Código:
    <html> 
    <head>
        <title>java script: Adicionar e remover campos dinamicamente!</title> 
        <script language="JavaScript" type="text/javascript">  
        /*
        Script desenvolvido por: klonder
        Postagem exclusiva em: http://www.forum.imasters.com.br
        Liberado para uso e modificação.
        */

        //Não altere esses valores!
        var iCount = 0;
        var hidden1;


        //Definindo quantos campos poderão ser criados (máximo);
        var iCamposTotal = 5;



        //Função que adiciona os campos;
        function addInput() {  

            hidden1 = document.getElementById("hidden1");
           
            //Criando uma variável que armazenará as informações da linha que será criada.
            //Os campos estão sendo colocados no interior de uma div, pois a linha contém muitos elementos;
            //Basta excluir a div, para excluir todos os elementos da linha;
            var texto = "<div id='linha"+iCount+"'><input type='text' name='texto"+iCount+"' id='texto"+iCount+"' value='Meu texto "+iCount+"'><input type='button' value='Apagar campo' onClick='removeInput(\"linha"+iCount+"\")'></div>";     
         
            //Capturando a div principal, na qual os novos divs serão inseridos:
            var camposTexto = document.getElementById('camposTexto');  
            camposTexto.innerHTML = camposTexto.innerHTML+texto;
         
            //Escrevendo no hidden os ids que serão passados via POST;
            //No código ASP ou PHP, você poderá pegar esses valores com um split, por exemplo;
                if (hidden1.value == "") {
                    document.getElementById("hidden1").value = iCount;
                }else{
                    document.getElementById("hidden1").value += ","+iCount;
                }
        iCount++;       
        
        }
          
        //Função que remove os campos;
        function removeInput(e) {
           var pai = document.getElementById('camposTexto');
           var filho = document.getElementById(e);
           hidden1 = document.getElementById("hidden1");
           var campoValor = document.getElementById("texto"+e.substring(5)).value;
           var lastNumber = hidden1.value.substring(hidden1.value.lastIndexOf(",")+1);

           if(confirm("O campo que contem o valor:\n» "+campoValor+"\nsera excluido permanentemente!\n\nDeseja prosseguir?")){
                var removido = pai.removeChild(filho);
                //Removendo o valor de hidden1:
                if (e.substring(5) == hidden1.value) {
                    hidden1.value = hidden1.value.replace(e.substring(5),"");
                }else if(e.substring(5) == lastNumber) {
                    hidden1.value = hidden1.value.replace(","+e.substring(5),"");
                }else{
                    hidden1.value = hidden1.value.replace(e.substring(5)+",","");       
                }
            iCampos--;
            }
        }
        </script>
    </head> 

<body> 

<form  name="my_form" id="my_form" action="" method="post"> 
    <input type="button" value="Criar campo texto" name="add_input" id="add_input" onClick="addInput();"> 
    <div id="camposTexto"></div>
       
    <br><input type="text" name="hidden1" id="hidden1" value="" hidden>
</form> 

</body> 
</html>
    rbaselio, Maio 4, 2015
    #1
  2. Darckles

    Darckles Sem Pontuação

    Olá,

    O que você está querendo, no ECM é chamada de tecnica Pai x Filho.

    Segue manual de customização (pag. 19) e um exemplo de como implementa.

    Arquivos Anexados:

    Darckles, Maio 12, 2015
    #2
    rbaselio curtiu isso.

Compartilhe esta Página