Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Luiz Gehlen

[Resolvido] Gerar inputs e os Remover com JavaScript

Por , em Javascript

Recommended Posts

Luiz Gehlen    0

Luiz Gehlen
Postado

Olá,

Consegui fazer um script para colocar campos de tipo file dinamicamente no html, porém, para removelos... ;x

<script type="text/javascript">
   var i = 0;
   function addCampoFile() {
       document.getElementById("campos").innerHTML += "<p id='class"+i+"'> <input type='file' name='foto"+i+"' id='foto"+i+"' /></p>";
       i++;
   }
   function tiraCampoFile() {
       //oque tinha aqui num quero nem mostra ;x
   }

 

o html code:

<form method="post" enctype="multipart/form-data">
               <p>
                   <label for="Titulo">
                       Titulo:      
                       <input type="text" name="titulo" id="titulo" />
                   </label>
               </p>
               <p>
                   <label for="Descricao">
                       Descrição:
                       <input type="text" name="descricao" id="descricao" />
                   </label>
               </p>
               <p>
                   <label for="fotos">
                       Quantas fotos você deseja mostrar para seu evento?
                       <a href="#" class="mais" onclick="addCampoFile()">+</a>
                       <a href="#" class="menos" onclick="tiraCampoFile()">-</a>
                   </label>
               </p>
               <p>
                   <label for="fotos" id="fotos">
                       <div id="campos" >

                       </div>
                   </label>
               </p>
               <p>
                   <label for="Enviar">
                       <button type="submit" name="action" value="cadastrar">Cadastrar Evento</button>
                       <button type="reset">Limpar</button>
                   </label>
               </p>
           </form>

 

então minha duvida seria a seguinte, como remover os campos criados anteriormente?

consegui remover ate 2 campos usando decremento da variavel i, porem a partir desse momento num deu mais :(

 

outra duvida minha seria saber o porque quando defino valor nos inputs e adiciono um novo input o valor dos anteriores se perder?

vendo que javascript não deveria fazer isso certo?

 

Desde já agradeço

Luiz Felipe.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dii    15

Dii
Postado

Eu fiz um esquema parecido com o seu. Veja o que ele faz.

 

index.html

 

<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.1.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
// Define o valor que será adicionado na página.
var input = "<div id='field'>Nome: <input type='text' id='i' name='i'> <a href='#' style='color:black;font-weight:bold;text-decoration:none;' id='link'>X</a></div>";
// O que definirá o ID da variável
var i = 0;
// Executa o evento CLICK no botão ADD.
$('#add').live('click',function(){
       // Adiciona o conteúdo dinamicamente dentro da div#conteudo.
$('#conteudo').append(input);
// Faz o incremento dos valores.
i++;
});
// Executa o evento CLICK no link X.
$('#link').live('click',function(){
       // Remove os conteudos criados dinamicamente.
$('#field').remove();
// Retorna falso o valor do LINK.
return false;
});

});
</script>
</head>
<body>
<form id='form'>
<input type='button' value='Add' id='add'><br/><br/>
Nome: <input type='text' id='foto' name='foto'/>
<!-- Aqui será mostrado o conteudo. -->
<div id='conteudo'>
</div>
</form>
</body>
</html>

 

Qualquer dúvida, é so dizer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Dii    15

Dii
Postado

Na verdade, ele remove o último, o problema é que comko os campos sao iguais, voce nao nota a diferença.

Dai ele remove e sobe.

Poe algo que diferencie que você verá.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz Gehlen    0

Luiz Gehlen
Postado

Sim, se eu inserir conteudo no primeiro e remover ele, eu perco o primeiro, o com conteudo ^^

 

o problema é um problema de logica simples, você insere um campo chamado field e depois remove um campo chamado field, ele obviamente vai retirar o primeiro :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Corrigindo e melhorando o script proposto

 

 

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

var input = '<label>Nome: <input type="text" name="foto[]" /> <a href="#" class="remove">X</a></label>';

$("input[name='add']").click(function( e ){
	$('#inputs_adicionais').append( input );
});

$('#inputs_adicionais').delegate('a','click',function(){
	$( this ).parent('label').remove();
});

});
</script>
<style type="text/css">
fieldset { border: none; }
label { display: block; }
.remove { color:black;font-weight:bold;text-decoration:none; }
</style>
</head>
<body>

<form action="" method="post">
	<input type="button" name="add" value="Add" /><br/><br/>
		<label>Nome: <input type="text" name="foto[]" /></label>

	<fieldset id="inputs_adicionais">
	</fieldset>
</form>
</body>
</html>

 

alguns pontos:

-> sempre usem aspas duplas para delimitar os valores dos atributos html

-> prefira o delegate(), no lugar do live()

-> saiba trabalhar percorrendo o DOM

-> não é necessario sair jogando ID em tudo

-> não use o live sem necessidade, 'bindar' direto o evento é mais rápido

-> procure indentar corretamente

 

 

enjoy :lol:

Eu tinha criado um 'parecido' para outra duvida:

http://www.wbruno.com.br/blog/2011/02/04/criar-input-no-onblur-e-receber-dados-array-php/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito