Atualizar input ao escolher opção de um <select>

[ment0r 1]

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.

 

 

[Omar~ 87]

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

 

Então, meu exemplo aqui vai ser genérico, mas não diferencia em nada para qualquer estrutura, pois vamos nos orientar por elementos identificadores. Que é o select e os inputs que vão receber os dados.

Primeiro o html base com os scripts:

Spoiler

<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>

<input type="text" id="informacao1"/>
<input type="text" id="informacao2"/>

<div id="local_do_ajax"></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>

 

 

Simples não é?

Inclusão do css e o js usado pelo ajaxrequest

Criamos o grupo seletor "select" e suas opções que são o valor que eu devo passar para o próximo arquivo.

Então os dois input's que serão preenchidos com o valor logo após o ajax.

Entra o elemento #id onde o arquivo será aberto pelo ajax (É importante que ele fique abaixo dos inputs!)

Então no script primeiramente instanciamos a classe js AjaxRequest criando seu objeto que chamei de ajax mesmo.

Pego o elemento #ID do seletor e adiciono o evento a ele que vai disparar toda vez que ele for alterado chamando uma função que é responsável por obter o valor e executar o método do ajax.

Spoiler

* A classe AjaxRequest possui alguns métodos, o método pop é um método que executa ajax via GET. Possui uma animação de progresso no canto inferior esquerdo da página, desde que você tenha incluído o arquivo css.

Caso não queira essa animação de progresso use o método open

 

No caso: "lembre-se que o objeto será o nome que você der na instância da classe"

ajax.open('DIV_ID_ONDE_CARREGAR', 'CAMINHO_OU_URL_DO_ARQUIVO');

 

Agora é só irmos ao arquivo php que recebe os dados e usar o php para filtrar o valor recebido, então usar o javascript para preencher os inputs

Spoiler

<?php
if (isset($_GET['parametro']) && !empty($_GET['parametro'])) {
    $valor = filter_input(INPUT_GET, 'parametro', FILTER_DEFAULT);
    if (preg_match('/^([a-zA-Z0-9]+)$/i', $valor)) {
        switch ($valor) {
            case 'consulta1':
                $quantidade = 10;
                $valor = 111;
                break;
            case 'consulta2':
                $quantidade = 20;
                $valor = 222;
                break;
            case 'consulta3':
                $quantidade = 30;
                $valor = 333;
                break;
        }
        ?>
        <script>
            document.getElementById('informacao1').value = '<?= $quantidade ?>';
            document.getElementById('informacao2').value = '<?= $valor ?>';
        </script>
        <?php

    }
}

 

 

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.

De qualquer forma terá que tratar os dados quando submeter um suposto form, porque mesmo oculto ou desabilitados os inputs podem ser manipulados pelo inspetor do navegador.

[ment0r 1]

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.

[ment0r 1]

Caro Omar~

 

A parte de pedido do meu sistema será da seguinte forma:

 

 

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á.

[Omar~ 87]

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
if (preg_match('/^([a-zA-Z0-9]+)$/i', $input)) {
    switch ($input) {
        case 'consulta1':
            $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"
  }
}

 

 

[ment0r 1]

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.

[ment0r 1]

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>
<!-- ONDE EU GOSTARIA QUE APARECESSE -->
<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.