[Resolvido] JQUERY :: Formulário Dinâmico

D'Emery · Março 29, 2012

Olá a todos,

Sou novo em JavaScript/Jquery, mas estou tentando desenvolver um formulário dinâmico, ou seja, que os item são "ADD" através de um link chamado "+ Serviço". E também quando o Item é selecionado irá mudar o conteúdo dos Subitens.

Inicialmente ficaria assim:

       <form action="Retorno.php" method="post">
           <fieldset>
               <legend>
                   Dados do Serviço
               </legend>
               <div class="Item">
                   <label>Preço Total do Serviço (R$)</label>
                   <input name="precoServico" type="text" value="" size="9" />
               </div>
               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                   	<option selected="selected">Selecione</option>
                   	<option value="1">SERVICO 1</option>
                   	<option value="2">SERVICO 2</option>
                   	<option value="3">SERVICO 3</option>
                   	<option value="4">SERVICO 4</option>
                   	<option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens"></div>
               </div>
               <div id="MoreItens">
               </div>
               <div class="Button">
               	<a href="#" id="Add">
                   	+ Serviço
                   </a>
                      
                   <input type="submit" value="Enviar" />
               </div>
           </fieldset>
       </form>

Ao clicar no link "+ Serviços" irá ser inserido na div#MoreItens uma nova div.Item igual a de cima.

E ao selecionar o Item, do SELECT, irá acrescentar (ou não, caso não haja) Subitens dentro da div#Subitens.

Abaixo está o código que fiz em Jquery:

$(document).ready(function(){
$("select#IdTipo").live('change', function(){
	$.post('includes/subs.php', {IdSolution:$(this).val()}, function(conteudo){
		if ( conteudo == "" ) {
			$("select#IdTipo").siblings("div.Subitens").html('');
		} else {
			conteudo += '<div id="Clear"></div>';
			$("select#IdTipo").siblings("div.Subitens").html(conteudo);
		}
	});
});

$("#Add").click(function(){
	$.ajax({
		url: "includes/servicos.php",
		success: function(Select){
			var Item = '<div class="Item"><label>Serviço</label>' + Select + '<div class="Subitens"></div></div>';
			$("div#MoreItens").append(Item);
		}
	});			
});
});

Explicando logo o "ADD": Esse código irá incrementar uma div.Item na div#MoreItens.

Já o select#IdTipo irá procurar no MySQL se existe Subitem e quantos Subitens existem, havendo ele irá incrementar na div.Subitens. Aí que está o erro!!!

Quando ele vai adicionar, ele adicionar em todos as "divs irmãs" do select#IdTipo. Já tentei colocar das seguintes formas, e nenhuma delas carrega o HTML:

$(this).siblings("div.Subitens").html(conteudo); // Tentativa 1

$(this).siblings("div").html(conteudo); // Tentativa 2

$("select#IdTipo").next("div").html(conteudo); // Tentativa 3

$(this).next("div").html(conteudo); // Tentativa 4

$(this+" ~ div.Subitens").html(conteudo); // Tentativa 5

$("select#IdTipo ~ div.Subitens").html(conteudo); // Tentativa 6

Tentei e não funcionou!

Outra coisa que pensei foi em tornar cada select#IdTipo único, aí vem a bronca!!!

Como vou tornar cada um único, se quando for receber no "Retorno.php" vai ser a maior confusão!?!?

Peço a ajuda, porque é um trabalho para o cliente, e está faltando finalizar isso para ser entregue. Tive que pedir mais prazo, e ele me deu + 2 dias.

Desde já agradeço a atenção! Obrigado!

William Bruno · Março 29, 2012

o valor desse Select:

success: function(Select){

é o mesmo que já está no html ?

<select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>

?

se for não precisa de ajax nisso. E simplifica o próximo passo.

D'Emery · Março 30, 2012

o valor desse Select:

success: function(Select){

é o mesmo que já está no html ?

<select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>

?

se for não precisa de ajax nisso. E simplifica o próximo passo.

Grande William Bruno! O problema não está nessa parte e sim na anterior.

Vamos supor que eu "ADD" 3 novos serviços, clicando lá no "+ Serviço"... Só que selecionei nos 3 primeiros o tipo de SERVIÇO que não tem Subitens, logo não vai incrementar nada no "$("select#IdTipo").siblings("div.Subitens").html('');", então quando no quarto eu selecionei um tipo que tem Subitens, logo vai incrementar no "div.Subitens" com o seguinte código: "$("select#IdTipo").siblings("div.Subitens").html(conteudo);".

Aí que está o problema: Ele vai incrementar em todos os "div.Subitens".

Como falei antes, já tentei solucionar com os códigos:

$(this).siblings("div.Subitens").html(conteudo); // Tentativa 1

$(this).siblings("div").html(conteudo); // Tentativa 2

$("select#IdTipo").next("div").html(conteudo); // Tentativa 3

$(this).next("div").html(conteudo); // Tentativa 4

$(this+" ~ div.Subitens").html(conteudo); // Tentativa 5

$("select#IdTipo ~ div.Subitens").html(conteudo); // Tentativa 6

Mais ou incrementa em todos (como está!) ou não faz nada, fica vazio.

Como no exemplo, vai ficar da seguinte forma (Add três vezes!):

       <form action="Retorno.php" method="post">
           <fieldset>
               <legend>
                   Dados do Serviço
               </legend>
               <div class="Item">
                   <label>Preço Total do Serviço (R$)</label>
                   <input name="precoServico" type="text" value="" size="9" />
               </div>
               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens"></div>
               </div>
               <div id="MoreItens">

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens"></div>
               </div>

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens"></div>
               </div>

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens">

                       // Era somente para modificar nesse, se eu selecionasse o tipo que tem subitens

                       <div class="subitem">Subitem 1</div>
                       <div class="subitem">Subitem 2</div>
                       <div class="subitem">Subitem 3</div>
                       <div class="subitem">Subitem 4</div>
                       <div class="subitem">Subitem 5</div>
                       <div class="subitem">Subitem 6</div>

                   </div>
               </div>


               </div>
               <div class="Button">
                       <a href="#" id="Add">
                       + Serviço
                   </a>
                      
                   <input type="submit" value="Enviar" />
               </div>
           </fieldset>
       </form>

Com o código do jeito que está aparece da seguinte forma:

       <form action="Retorno.php" method="post">
           <fieldset>
               <legend>
                   Dados do Serviço
               </legend>
               <div class="Item">
                   <label>Preço Total do Serviço (R$)</label>
                   <input name="precoServico" type="text" value="" size="9" />
               </div>
               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens">

                       // Modifica nessa div.Subitens

                       <div class="subitem">Subitem 1</div>
                       <div class="subitem">Subitem 2</div>
                       <div class="subitem">Subitem 3</div>
                       <div class="subitem">Subitem 4</div>
                       <div class="subitem">Subitem 5</div>
                       <div class="subitem">Subitem 6</div>

                   </div>
               </div>
               <div id="MoreItens">

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens">

                       // Modifica nessa div.Subitens

                       <div class="subitem">Subitem 1</div>
                       <div class="subitem">Subitem 2</div>
                       <div class="subitem">Subitem 3</div>
                       <div class="subitem">Subitem 4</div>
                       <div class="subitem">Subitem 5</div>
                       <div class="subitem">Subitem 6</div>

                   </div>
               </div>

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens">

                       // Modifica nessa div.Subitens

                       <div class="subitem">Subitem 1</div>
                       <div class="subitem">Subitem 2</div>
                       <div class="subitem">Subitem 3</div>
                       <div class="subitem">Subitem 4</div>
                       <div class="subitem">Subitem 5</div>
                       <div class="subitem">Subitem 6</div>

                   </div>
               </div>

               <div class="Item">
                   <label>Serviço</label>
                   <select id="IdTipo" name="IdTipo[]">
                       <option selected="selected">Selecione</option>
                       <option value="1">SERVICO 1</option>
                       <option value="2">SERVICO 2</option>
                       <option value="3">SERVICO 3</option>
                       <option value="4">SERVICO 4</option>
                       <option value="5">SERVICO 5</option>
                   </select>
                   <div class="Subitens">

                       // Modifica nessa div.Subitens

                       <div class="subitem">Subitem 1</div>
                       <div class="subitem">Subitem 2</div>
                       <div class="subitem">Subitem 3</div>
                       <div class="subitem">Subitem 4</div>
                       <div class="subitem">Subitem 5</div>
                       <div class="subitem">Subitem 6</div>

                   </div>
               </div>


               </div>
               <div class="Button">
                       <a href="#" id="Add">
                       + Serviço
                   </a>
                      
                   <input type="submit" value="Enviar" />
               </div>
           </fieldset>
       </form>

JCMais · Março 30, 2012

Tá meio complicado entender essa tua dúvida, mas eu já vi um erro no teu código, você está duplicando a ID "IdTipo" em mais de um elemento, IDs devem ser únicas, não podem ser repetidas, neste caso use uma classe.

D'Emery · Março 30, 2012

Tá meio complicado entender essa tua dúvida, mas eu já vi um erro no teu código, você está duplicando a ID "IdTipo" em mais de um elemento, IDs devem ser únicas, não podem ser repetidas, neste caso use uma classe.

É bem simples minha dúvida!

Como eu faço para carregar os Subitens (se houver) dentro da "div.Subitens" de um determinado Item, sem alterar nos outros "div.Subitens" dos outros Itens?

// SE HOUVER SUBITEM NO DETERMINADO ITEM
<div class="Item">
   <label>ITEM</label>
   <select class="Item" name="IdItem[]">
       <option value="1" selected="selected">ITEM 1</option> // Supondo que o Item 1 tem Subitens e os outros não!
       <option value="2">ITEM 2</option>
       <option value="3">ITEM 3</option>
   </select>
   <div class="Subitens">
       <div class="Subitem">
           <input name="IdSubitem[]" type="text" size="2" />
           <label>Subitem 1</label>
       </div>
       <div class="Subitem">
           <input name="IdSubitem[]" type="checkbox" value="C" />
           <label>Subitem 2</label>            
       </div>
       <div class="Subitem">
           <input name="IdSubitem[]" type="checkbox" value="C" />
           <label>Subitem 3</label>            
       </div>
       <div class="Subitem">
            <input name="IdSubitem[]" type="text" size="2" />
           <label>Subitem 4</label>           
       </div>
       <div class="Subitem">
           <input name="IdSubitem[]" type="checkbox" value="C" />
           <label>Subitem 5</label>            
       </div>
   </div>
</div>

// SE NÃO HOUVER SUBITEM NO ITEM
<div class="Item">
   <label>ITEM</label>
   <select class="Item" name="IdItem[]">
       <option value="1">ITEM 1</option>
       <option value="2" selected="selected">ITEM 2</option> // Supondo que o Item 2 não há Subitens
       <option value="3">ITEM 3</option>
   </select>
   <div class="Subitens"></div>
</div>

Se houver ele carrega os subitens, se não houver ele não carrega no "div.Subitens". Essa é a bronca do código que eu fiz, pois ele carrega em todos os "div.Subitens", e as tentativas de tentar sanar o problema não teve sucesso.

manica · Março 30, 2012

D'Emery,

veja se isso resolve:

$("select#IdTipo").live('change', function(){
        var $item = $(this).parent().index();
               $.post('includes/subs.php', {IdSolution:$(this).val()}, function(conteudo){
                       if ( conteudo == "" ) {
                               $("select#IdTipo").siblings("div.Subitens").html('');
                       } else {
                               conteudo += '<div id="Clear"></div>';
                               //$("select#IdTipo").siblings("div.Subitens").html(conteudo);
                                 $(".Item:eq("+$item+")").children(".Subitens").html(conteudo);
                       }
               });
       });

D'Emery · Março 31, 2012

D'Emery,

veja se isso resolve:

$("select#IdTipo").live('change', function(){
        var $item = $(this).parent().index();
               $.post('includes/subs.php', {IdSolution:$(this).val()}, function(conteudo){
                       if ( conteudo == "" ) {
                               $("select#IdTipo").siblings("div.Subitens").html('');
                       } else {
                               conteudo += '<div id="Clear"></div>';
                               //$("select#IdTipo").siblings("div.Subitens").html(conteudo);
                                 $(".Item:eq("+$item+")").children(".Subitens").html(conteudo);
                       }
               });
       });

Tentei usar teu código, mas não deu certo, ele só pegava o index=1.

Mas eu comecei a pesquisar, com base no que você colocou e saiu o determinado código:

$("select.IdTipo").live('change', function(){
	var Item = $("select.IdTipo").index(this); // Seleciona que foi mudado do select.IdTipo 
	$.post('includes/subs.php', {IdSolution:$(this).val()}, function(conteudo){
		if ( conteudo == "" ) {
			$("div.Subitens").eq(Item).html(''); // Muda o EQ do div.Subitens
		} else {
			conteudo += '<div id="Clear"></div>';
			$("div.Subitens").eq(Item).html(conteudo); // Muda o EQ do div.Subitens
		}
	});
});

Agora ta rodando filé!

Agradeço desde já o Willian Bruno, JCMais e em especial Manica (por trazer a luz!)!!!

Agora entregar redondo na segunda ao cliente! :D

Entrar

Arquivado

[Resolvido] JQUERY :: Formulário Dinâmico

Recommended Posts

D'Emery 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

D'Emery 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JCMais 75

Compartilhar este post

Link para o post

Compartilhar em outros sites

D'Emery 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

manica 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

D'Emery 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante