Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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!
>
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>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.
>
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.
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,
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
se for não precisa de ajax nisso. E simplifica o próximo passo.