Ir para conteúdo
ment0r

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

Recommended Posts

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.

 

 

img.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caro Omar~

 

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

 

2ns10mx.png

 

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

11.png

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

 

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Bruno123
      Olá, estou com uma dúvida na hora  de retornar se o número é primo ou não, poderiam me ajudar por gentileza ? Obrigado !
      <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body> <script src="javascript.js"></script> </body> </html> 'use strict' let num = prompt("Insira um número:"); let c = 0; for (i = 1; i <= num; i++) { if (num % i == 0) { c++; } } if (c == 2) { alert ("É PRIMO") } else { alert("NÃO É PRIMO") }  
    • Por user32
      Olá pessoal,
      sempre fui um curioso na programação e agora estou começando entender o javascript.
       
      edit:
      como eu consiguiria fazer a variavel buscar alem de 9... como numeros como 10-20, 20-30 ?
      toda ajuda é bem vinda, desde já agradeço
       
       
      <script type="text/javascript"> function funcao1() { var num1 = Number(document.getElementById("num1").value); var elemResult = document.getElementById("total"); var d90 = /[0-3]/; var d80 = /[4-5]/; var d70 = /[6-9]/; if (d90.test(num1)) { elemResult.innerText = String(num1 * "1") + "."; } else if (d80.test(num1)) { elemResult.innerText = String(num1 * "2") + "."; } else if (d70.test(num1)) { elemResult.innerText = String(num1 * "3") + "."; } else { // IE elemResult.innerText = String(num1 * "5") + "."; } } </script>  
    • Por clickanapolis
      Bom dia, no meu site coloquei ao clicar no link ele vai para uma div dentro da propria pagina, visto que a mesma e uma unica pagina.
       
      O problema é que quando clica no link ele esta parando fora do inicio da div, o que devo fazer?
       
      <script type="text/javascript"> jQuery(document).ready(function ($) { $(".scroll").click(function (event) { event.preventDefault(); $('html,body').animate({ scrollTop: $(this.hash).offset().top }, 1000); }); }); </script> e chamo o link assim:
       
      <li><a href="#acimetech" class="scroll">A Cimetech</a></li>  
    • Por Kelven
      Galera to enfrentando um problema, no meu tumblr to querendo colocar o popup de newsletter do Mailchimp, até ai tudo bem, é pra funcionar que nem no script abaixo, porém esse script só funciona se eu excluir aquela parte que está marcada, porém se eu excluir ela o tema do tumblr não funciona como deveria em celulares. Alguém sabe me dizer que tipo de conflito é esse e como posso resolver???
      <script type='text/javascript' src='http://space.fitterbiz.com/wp-includes/js/wp-embed.min.js?ver=4.9.10'></script> <script type="text/javascript" src="//downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script> <script> function showMailingPopUp() { require( ["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.us14.list-manage.com","uuid":"7f359a9e538573b27c9e39820","lid":"e64535f817"}) } ); document.cookie = 'MCPopupClosed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;'; document.cookie = 'MCPopupSubscribed=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;'; } document.getElementById("open-popup").onclick = function() {showMailingPopUp()}; </script> <a onclick="showMailingPopUp(); return false;" id="open-popup" style="cursor:pointer">Subscribe!</a> <!-- quando coloco isso não funciona --> <script src="https://static.tumblr.com/xlsgtjb/mt5o305mz/scripts.min.js" charset="UTF-8"></script> <!-- quando coloco isso não funciona -->
    • Por Kelven
      Olá pessoal tudo bem?
       
      Então eu quero colocar um formulário de newsletter em um servidor q não tem suporte para php, o negócio é q depois que a pessoa clica em se cadastrar eu quero que ela seja redirecionada para outro site, então gostaria de saber como posso estar fazendo isso usando apenas javascript, jquery ou ajax com o API do Mailchimp? Porque já procurei muito e não achei, só achei em php.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.