Ajuda ! ! Campo Dinâmico
11/02/2014
0
Estou precisando da ajuda dos universitários, hehehe.
É o seguinte, tenho um campo select sendo alimentado pelos registros vindo do banco. O que preciso fazer é que quando um valor for selecionado esse "click" crie um campo input dinâmico referenciando seu nome e um campo para dar descrição a essa seleção.
Exemplo: Select com os options (Maq1, MAq2 e MAq3), selecionei a Maq3 quero dar uma descrição do serviço que realizei na máquina.
OBS: Posso adicionar mais de uma maquina e vou jogar esse inputs criados dinamicamente no banco.
Grato.
Thiago Ceconelo
Posts
11/02/2014
Claudio Lopes
Ja fiz um sistema assim, como detalhamento do produto.
Bom, no banco de dados, logico que alem do produto, você terá também a descrição dele.... isso em uma tabela relacional ou não...
Seu primeiro select traz os dados do banco do tipo
<select>
<option value='idProduto'>Pruduto</option>
</select>
crie uma função javascript que quando o usuário selecionar a opção (option) passe o id via post e retorne com a descrição ...
Pra isso eu uso a função $.post e o seu retorno retorno como html... Fica dinâmico...
11/02/2014
Thiago Ceconelo
Ja fiz um sistema assim, como detalhamento do produto.
Bom, no banco de dados, logico que alem do produto, você terá também a descrição dele.... isso em uma tabela relacional ou não...
Seu primeiro select traz os dados do banco do tipo
<select>
<option value='idProduto'>Pruduto</option>
</select>
crie uma função javascript que quando o usuário selecionar a opção (option) passe o id via post e retorne com a descrição ...
Pra isso eu uso a função $.post e o seu retorno retorno como html... Fica dinâmico...
Din,
obrigado pelo retorno e ideia, meu problema e falta de conhecimento em JS sou iniciando na programação.
Você teria um exemplo do código que devo usar?
Abraço.
12/02/2014
Joel Rodrigues
<!doctype html>
<html>
<head>
<title>Campos dinâmicos</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("#selectServicos").change(function(){
var valor = $(this).val();
var texto = $("#selectServicos>option:selected").html();
var nome = "input"+texto;
$("#divCampos").append("<div>");
$("#divCampos").append("<label for='"+nome+"'>"+texto+"</label>");
$("#divCampos").append("<input id='"+nome+"' type='text'/>");
$("#divCampos").append("</div>");
});
});
</script>
</head>
<body>
<form id="form1">
<select id="selectServicos">
<option value="Maq1">Maq 1</option>
<option value="Maq2">Maq 2</option>
<option value="Maq3">Maq 3</option>
</select>
<div id="divCampos">
</div>
<input type="submit"/>
</form>
</body>
</html>A partir disso, creio que você consiga adaptar.
Abraço.
12/02/2014
Claudio Lopes
Não esqueça de usar o plugin ja jquery, no caso eu uso o boostrap !!!!
o codigo é esse:
$.post('getDados.php', {deslogar: 'ok'}, function(data) {
seu codigo
});
getDados.php -> Pagina php que será acionada pelo ajax
{} -> Esses são os parametros que você vai passar via post nesse padrão nome:valor
function(data){} -> função que dara o retorno da chamada
Agora que você ja conhece, vamos a patrica!
Meu modo de trabalhar é o seguinte, digamos que você dividiu sua tela em dois, do lado esquerdo você vai colocar o select com a lista do produto e do lado direito voce quer a descrição. faça uma div e sete um id pra ela no caso faça assim <div id="descricaoProduto"></div>
No seu select coloque uma função onchange="" chamando a function fcDetalheProduto passando por parametro o valor do option selecionado assim <select name="" id="" onchange="fcDetalheProduto (this.value);"
Então sua function javascript fica assim
<script>
function fcDetalheProduto (idProduto){
$.post('getDados.php', {pedido: idProduto'}, function(data) {
$("#descricaoProduto").html(data)
});
}
</script>;
dentro da função post, o que fizemos foi selecionar pelo id o a div e setar como conteudo html o seu retorno da pagina getDados.php
Dentro da pagina getDados.php:
<?php
if(isset($_post['pedido'])){
aqui vc faz sua consulta com o banco e retorna os dados que irão para a div
}
?>
Dica: como o seu retorno é em html, tabalhe com tabelas, divs na pagina getDados para que sua exibição fique mais atraente.
Existem vários post aqui no dev falando sobre essa função, se alguem puder ajudar fique a vontade, esse é o padrão que eu uso, facilita muito.
Qualquer coisa chame ai
12/02/2014
Thiago Ceconelo
<!doctype html>
<html>
<head>
<title>Campos dinâmicos</title>
<meta charset="utf-8"/>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){
$("#selectServicos").change(function(){
var valor = $(this).val();
var texto = $("#selectServicos>option:selected").html();
var nome = "input"+texto;
$("#divCampos").append("<div>");
$("#divCampos").append("<label for='"+nome+"'>"+texto+"</label>");
$("#divCampos").append("<input id='"+nome+"' type='text'/>");
$("#divCampos").append("</div>");
});
});
</script>
</head>
<body>
<form id="form1">
<select id="selectServicos">
<option value="Maq1">Maq 1</option>
<option value="Maq2">Maq 2</option>
<option value="Maq3">Maq 3</option>
</select>
<div id="divCampos">
</div>
<input type="submit"/>
</form>
</body>
</html>A partir disso, creio que você consiga adaptar.
Abraço.
Joel Rodrigues,
agradeço a solução apresentada adaptei a minha necessidade e esta funcionando.
Agora só trabalhar com o post do Din pois preciso resgatar isso no php e mandar para o banco.
Vlw pela força.
Abraço
12/02/2014
Thiago Ceconelo
Não esqueça de usar o plugin ja jquery, no caso eu uso o boostrap !!!!
o codigo é esse:
$.post('getDados.php', {deslogar: 'ok'}, function(data) {
seu codigo
});
getDados.php -> Pagina php que será acionada pelo ajax
{} -> Esses são os parametros que você vai passar via post nesse padrão nome:valor
function(data){} -> função que dara o retorno da chamada
Agora que você ja conhece, vamos a patrica!
Meu modo de trabalhar é o seguinte, digamos que você dividiu sua tela em dois, do lado esquerdo você vai colocar o select com a lista do produto e do lado direito voce quer a descrição. faça uma div e sete um id pra ela no caso faça assim <div id="descricaoProduto"></div>
No seu select coloque uma função onchange="" chamando a function fcDetalheProduto passando por parametro o valor do option selecionado assim <select name="" id="" onchange="fcDetalheProduto (this.value);"
Então sua function javascript fica assim
<script>
function fcDetalheProduto (idProduto){
$.post('getDados.php', {pedido: idProduto'}, function(data) {
$("#descricaoProduto").html(data)
});
}
</script>;
dentro da função post, o que fizemos foi selecionar pelo id o a div e setar como conteudo html o seu retorno da pagina getDados.php
Dentro da pagina getDados.php:
<?php
if(isset($_post['pedido'])){
aqui vc faz sua consulta com o banco e retorna os dados que irão para a div
}
?>
Dica: como o seu retorno é em html, tabalhe com tabelas, divs na pagina getDados para que sua exibição fique mais atraente.
Existem vários post aqui no dev falando sobre essa função, se alguem puder ajudar fique a vontade, esse é o padrão que eu uso, facilita muito.
Qualquer coisa chame ai
Din,
mais uma vez vlw pela força. O que acha melhor ou o que você costuma fazer? Mandar para o banco direto pelo JS ou enviar para php e depois banco?
Vlw.
Abraço
12/02/2014
Claudio Lopes
13/02/2014
Joel Rodrigues
Depois veja as funções de formulário da jQuery, tem um método serialize() que talvez lhe ajude.
Abraço.
14/02/2014
Thiago Ceconelo
Depois veja as funções de formulário da jQuery, tem um método serialize() que talvez lhe ajude.
Abraço.
Joel Rodrigues,
obrigado pela força, vou dar uma olhada nesse método e qualquer coisa gritooo socorro ...heheheh...
Abraço.
Clique aqui para fazer login e interagir na Comunidade :)
