Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá amigos.
Mais uma problema que precisa ser resolvido... Bom, dessa vez é o seguinte: tenho um <select> que traz de uma tabela PRODUTO (id, nome, unidade, preco) o nome. Preciso que ao escolher um produto, seja preenchido automaticamente um <input> com o preço referente à esse produto.
Alguém pode me ajudar de uma forma mais simples possível?
*Já adianto os agradecimento àqueles que postarem vídeo aulas sobre javascript e/ou ajax, mas como se trata de uma parte do sistema, preciso resolver com urgência pra não ficar 'empacado' na mesma, portanto um exemplo prático é o que peço no momento.*
Muito obrigado desde já a todos. Um grade abraço.
Muuuito obrigado Omar pela ajuda.
Vou ler atentamente seu conteúdo e vou adaptar para meu sistema. Assim que eu conseguir posto aqui e se caso enroscar rsrs, peço ajuda novamente.
>
Citar
Obs.: O ideal acredito para você é que os inputs sejam ocultos (type="hidden") e que você tenha um div ou span que servirá como um input fake para que algum usuário não o altere.
Na verdade ele poderá alterar sim, pq o valor é pego do cadastro do produto, mas no momento do pedido, pode ser que ele esteja com valor diferente.
Mais uma vez, MUITO OBRIGADO.
Caro Omar~
A parte de pedido do meu sistema será da seguinte forma:
/applications/core/interface/imageproxy/imageproxy.php?img=http://i66.tinypic.com/2ns10mx.png&key=2dc16bf4c3dc1c80e6304b8a11ae40a90ca63d561596b48651cb4c75e1ec61f0" />
Cada vez que clico no + acrescenta mais um item do pedido e no - elimina esse item. Desse modo, uso um vetor, ou seja, o name="valor-unitario[]" pra poder armazenar todos os itens do pedido e no final, tratá-los. Minha pergunta é, com esse seu exemplo daria pra fazer assim?
Adaptei seu código, mas não estou conseguindo...
/*
* Teste.php
*/
<link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
<script src="AjaxRequest.js" type="text/javascript"></script>
<!-- <select id="seletor">
<option value="consulta1">Maçã</option>
<option value="consulta2">Laranja</option>
<option value="consulta3">Banana</option>
</select> -->
<select id="id_produto[]" name="id_produto" class="form-control">
<option value="" selected="selected">Escolha um produto</option>
<?php
require'../inc/conn.php';
$select = "select * from PRODUTO";
$query = ibase_query($select);
while ($array = ibase_fetch_object($query)) {
echo '
<option value="'.trim($array->ID).'" >'.utf8_decode(trim($array->NOME)).'</option>
';
}
?>
</select>
<input id="valor-unitario" name="valor-unitario[]" type="text" class="form-control" placeholder="Valor unitário">
<!-- <input type="text" id="informacao1"/>
<input type="text" id="informacao2"/> -->
<div id="local_do_ajax">1</div>
<script>
var ajax = new AjaxRequest();
document.getElementById('seletor').addEventListener('change', executaAjax, false);
function executaAjax(e) {
var valor = e.target.value;
if (valor) {
ajax.pop('local_do_ajax', 'arquivo_php.php?parametro=' + valor, false);
}
}
</script>
E/*
* Arquivo_php.php - a principio não mudei os nomes
*/
<?php
require'../inc/conn.php';
echo'
<script language="javascript">
alert ("Chegou aqui");
</script>
';
$_GET['parametro'] = 1;
if (isset($_GET['parametro']) && !empty($_GET['parametro'])) {
/*$valor = filter_input(INPUT_GET, 'parametro', FILTER_DEFAULT);*/
$select = "select * from PRODUTO where id = ".$_GET['parametro'];
$query = ibase_query($conn, $select);
$info = ibase_fetch_object($query);
?>
<script>
document.getElementById('valor-unitario').value = '<?= $info->PRECO ?>';
</script>
}
Coloquei o GET recebendo 1 só pra testar, mas mesmo assim não deu. Criei uma pasta e colei todos os arquivos lá. Não consigo achar onde estou errando. Se puder abusar de sua boa vontade... eu agradeço.
Muito obrigado desde já.
Sim dar para fazer, deixando de se orientar pelo elemento ID e usando a class do(s) seletor(es). Já que só podemos repetir nome de ID's em uma página (mesmo executando ajax).
O problema é em obter os inputs que vão ser preenchidos pós o ajax. Como informar quais são para o javascript?
Simples, usando conceito de herança Node, mas para isso eu precisaria do html completo. Como eu não tenho essa informação e mesmo com todo html, um exemplo simples fica difícil de apresentar, além do mais percebi o uso do BS coisa que eu nem meto a mão para mexer.
Optei por usar um "DATA-ATTRIBUTE" que lista qual o índice do NodeList que devemos atacar, já que vamos usar class ao invés de ID.
Bastando informar esse índice na url para o arquivo.
O negócio fica mais complicado pelo fato que cada seletor é criado de forma dinâmica através de um botão assim como percebi pela imagem.
Então para que isso funcione a função que cria o input terá que ser responsável por enumerar o valor para usar-mos.
(Você pode usar um variável global para isso e a cada adesão a variável se incrementa, e a cada retirada de elemento ela se decrementa. O importante que o primeiro elemento seja sempre 0 "zero")
Não sei ao exato de vai dar certo, "na teoria dar" pois como disse para ser preciso só com o html renderizado para orientar o javascript usando o "nextElementSibling" para chegar ao input sem chance de erro.
Também temos que modificar como a função será ativada, uma vez que não podemos buscar por um elemento e adicionar evento a ele, se depois do script carregado tem a opção de adicionar mais elementos. (A não ser que reescrevemos a variável que guarda essa informação).
Nesse caso optei por disparar a função diretamente em cada seletor através do onchange. Assim sendo quando criar o layout do input adicione os requezitos necessários.
Segue o código:
Spoiler
<link href="AjaxRequest.css" rel="stylesheet" type="text/css"/>
<script src="AjaxRequest.js" type="text/javascript"></script>
<form id="submit_com_ajax" onsubmit="return ajax.form(this.id, 'local_do_ajax', 'recebe_post.php');">
<div>
<!-- Seletor A -->
<select name="seletor[]" data-idx="0" onchange="executaAjax(this);">
<option value="nao_ativa_nada">Selecione uma opção</option>
<option value="consulta1">Maçã</option>
<option value="consulta2">Laranja</option>
<option value="consulta3">Banana</option>
</select>
<input name="input_do_seletor[]" type="text" class="informacao1"/>
<input name="input_do_seletor[]" type="text" class="informacao2"/>
</div>
<div>
<!-- Seletor B -->
<select name="seletor[]" data-idx="1" onchange="executaAjax(this);">
<option value="nao_ativa_nada">Selecione uma opção</option>
<option value="consulta1">Maçã</option>
<option value="consulta2">Laranja</option>
<option value="consulta3">Banana</option>
</select>
<input name="input_do_seletor[]" type="text" class="informacao1"/>
<input name="input_do_seletor[]" type="text" class="informacao2"/>
</div>
<div>
<!-- Seletor C -->
<select name="seletor[]" data-idx="2" onchange="executaAjax(this);">
<option value="nao_ativa_nada">Selecione uma opção</option>
<option value="consulta1">Maçã</option>
<option value="consulta2">Laranja</option>
<option value="consulta3">Banana</option>
</select>
<input name="input_do_seletor[]" type="text" class="informacao1"/>
<input name="input_do_seletor[]" type="text" class="informacao2"/>
</div>
<button>Submeter dados do formulário</button>
</form>
<div id="local_do_ajax"></div>
<script>
var ajax = new AjaxRequest();
function executaAjax(seletor) {
var indexAlvo = seletor.dataset.idx; // Armazendo o valor "data-idx" do alvo
var valorInput = seletor.value; // Armazeno o "value" do alvo
/*
* Somente prossegue com a função se houver o data idx e se o value seja algum valor permitido
*/
if (indexAlvo && valorInput !== 'nao_ativa_nada') {
ajax.pop('local_do_ajax', 'arquivo_php.php?valor_do_input=' + valorInput + '&index_do_elemento=' + indexAlvo, false);
}
}
</script>
O php um pouco modificado pois agora tem uma nova informação e não usa mais um elemento ID e sim o class para achar os inputs
Spoiler
<?php
$input = filter_input(INPUT_GET, 'valor_do_input', FILTER_DEFAULT);
$index = (int) $_GET['index_do_elemento']; // Valor obtido pelo "data-idx" de cada seletor $quantidade = 10;
$valor = 111;
break;
case 'consulta2':
$quantidade = 20;
$valor = 222;
break;
case 'consulta3':
$quantidade = 30;
$valor = 333;
break;
}
?>
<script>
/*
* Como o conceito de arquitetura do html é o select e logo então os inputs
* cada elemento class possui o mesmo index Node que o seletor.
* exemplo se fosse o seletor de numero 9 o php reenderizaria assim aqui
*
* getElementsByClassName('informacao1')[<?= $index ?>]
* getElementsByClassName('informacao1')[9]
*/
document.getElementsByClassName('informacao1')[<?= $index ?>].value = '<?= $valor ?>';
document.getElementsByClassName('informacao2')[<?= $index ?>].value = '<?= $quantidade ?>';
</script>
<?php
}
No caso eu usei 3 selects que seria a simulação de novos seletores criados.
Tomei também a ousadia de salvar o form usando também a classe AjaxRequest, esse foi o resultado dos dados enviados:
Spoiler
O arquivo que recebeu o post
<?php
echo ("<pre>");
var_dump($_POST);
echo ("</pre>");
E o resultado:array(3) {
["form_id"]=>
string(15) "submit_com_ajax"
["seletor"]=>
array(3) {
[0]=>
string(9) "consulta2"
[1]=>
string(9) "consulta1"
[2]=>
string(9) "consulta3"
}
["input_do_seletor"]=>
array(6) {
[0]=>
string(3) "222"
[1]=>
string(2) "20"
[2]=>
string(3) "111"
[3]=>
string(2) "10"
[4]=>
string(3) "333"
[5]=>
string(2) "30"
}
}
Omar~, te mandei uma MP, por favor, de uma olhada. Ademais, vou tentar adaptar o código ao meu sistema e posto o resultado assim que o fizer.
Muito obrigado.
Boa tarde amigos.
Depois de muito bater cabeça, quase consegui fazer o que eu queria, exceto por uma coisa. Consigo fazer o valor aparecer num select, mas não num input.
Vejam os códigos (páginas de exemplo somente, dps mudo pra página definitiva)
Nesse página index.php eu tenho a lista de produtos, exibidos via select.index.php
<label>Valor</label>
<!-- ONDE APARECE ATUALMENTE -->
<select name="valor" id="valor">
<option value="">Selecione</option>
<option value="Todos">Todos</option>
</select>
<select name="produto[]" id="produto" class="form-control">
<option value="" selected="selected">Escolha um produto</option>
<?php
$select = "select * from PRODUTO";
$query = ibase_query($select);
while ($array = ibase_fetch_object($query)) {
echo '
<option value="'.trim($array->NOME).'" >'.utf8_decode(trim($array->NOME)).'</option>
';
}
?>
</select><input name="valor-unitario[]" id="valor-unitario" type="text" class="form-control" placeholder="Valor unitário">
Nesse script, a mágica é feita, ele envia os valores pra getValor.php, lá é retornado os preços e então deveria aparecer no input do código acima, mas só consigo fazer aparecer no <option>
$(document).ready(function(){
$("#produto").change(function(){
$.ajax({
type: "POST",
url: "getValor.php",
data: {produto: $("#produto").val()},
dataType: "json",
success: function(json){
var options = "";
$.each(json, function(key, value){
options += '<option value="' + key + '">' + value + '</option>';
});
$("#valor").html(options);
}
});
});
});
Já adianto que mudei #valor pra #valor-unitario e
options += '<option value="' + key + '">' + value + '</option>';
para
options += '<input type="text" name="valor-unitario" value="' + key + '">'; tanto com key, quanto com value
Acredito que agora seja só um detalhe pra finalizar essa zebra.
Código do getValor.php, pra quem precisar
<?php
include"../inc/conn.php";
$retorno = array();
$selectValor = "select * from PRODUTO where nome = '".$_POST['produto']."'";
$query = ibase_query($selectValor);while ($array = ibase_fetch_object($query)) {
$retorno[trim($array->ID)] = trim($array->PRECO);
}
echo json_encode($retorno);
?>
Conto com vocês amigos. Desde já, muito obrigado.
Utilizei a própria função Javascript que desenvolvi somente para execução de ajax.
O link para obter os arquivos estão aqui: https://github.com/Spell-Master/sm-web/tree/master/scripts/AjaxRequest