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 patriciahelena
      Boa noite,
       
      Preciso de ajuda.
      No arquivo form.php tenho 3 inputs de entrada(valor1, valor2, valor3) e 3 inputs(disabled) que receberão os valores calculados do arquivo form_matematico5.php.
      Na tag form onsubmit="return calcula()"
       
          <h4 class="calcula"></h4>
       
      <script>
      function calcula($volmedio, $temp, $precogas) {
      $.get("form_matematico5.php", $('#calculorecovap').serialize(),
          function(data){
              $('.calcula').html(data);
          }
      );
      return false;
      }
      </script>
       
       
      No arquivo form_matecatico5.php é feito os calculos gerando 3 valores. 
      Tenho um echo:
      echo 'texto<br><div style=font-size:23px;color:red;>' . number_format($Resultado1,0,",","."). '</div> <br> texto<br><div style=font-size:23px;color:red;>'. number_format($Resultado2,0,",","."). '</div> <br>texto<br><div style=font-size:23px;color:red;>R$ '. number_format($Resultado3,2,",","."). '</div>';
       
      Ele retorna o echo certinho em     <h4 class="calcula"></h4>.
      Mas o que eu quero mesmo é que Resultado1 retorne dentro do primeiro input(disabled), o Resultado2 dento do segundo input(disabled) e assim com o terceiro. Ou seja,
      Cada input(disabled), recebera um valor diferente e não o total de .calcula.
       
      Espero ter explicado direitinho,
      Obrigada
       
       
       
       
       
       
       
    • Por Claudia França
      Pessoal escrevi o código,  (  <style id=”antiClickjack”>body{display:important;}</style>
      <script type=”text/javascript”>
      if (self === top) {
      var antiClickjack = document.getElementById(“antiClickjack”);
      antiClickjack.parentNode.removeChild(antiClickjack);
      } else {
      top.location = self.location;
      }
      </script> ) em um site o head por exigência da empresa de cartão, mas tenho percebido que com um tempo o site para de acionar o java script para carregar outra pagina.  Isso aconteceu depois desse código. Eu tenho que escrever algo no corpo no site para isso nao mais acontecer e deixar o anticlick habilitado. ?
    • Por Carcleo
      jQuery:
          // JavaScript Document          $(document).ready(function (e) {                  $("#idPastor").on("change", function () {                          $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRedes.php",                 type: "POST",                 dataType: "json",                 data: {                       idPastor: $("#idPastor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRede').find('option').remove();                                          if (result == null){                         $("#idRede").append("<option value=>Sem Redes</option>");                     } else {                         $("#idRede").append("<option value=>Escolha a Rede</option>");                         result.forEach(function(option){                             $("#idRede").append("<option value=" + option["idRede"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRede").on("change", function () {                                                $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosRegioes.php",                 type: "POST",                 dataType: "json",                 data: {                       idRede: $("#idRede").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idRegiao').find('option').remove();                     if (result == null){                         $("#idRegiao").append("<option value=>Sem Regiões</option>");                     } else {                         $("#idRegiao").append("<option value=>Escolha a Região</option>");                                                 result.forEach(function(option){                             $("#idRegiao").append("<option value=" + option["idRegiao"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idRegiao").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosAreas.php",                 type: "POST",                 dataType: "json",                 data: {                       idRegiao: $("#idRegiao").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                             $('#idArea').find('option').remove();                                 if (result == null){                             $("#idArea").append("<option value=>Sem Áreas</option>");                     } else {                                     $("#idArea").append("<option value=>Escolha a Área</option>");                             result.forEach(function(option){                             $("#idArea").append("<option value=" + option["idArea"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idArea").on("change", function () {                                                   $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosSetores.php",                 type: "POST",                 dataType: "json",                 data: {                       idArea: $("#idArea").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idSetor').find('option').remove();                                             if (result == null){                         $("#idSetor").append("<option value=>Sem Setores</option>");                     } else {                         $("#idSetor").append("<option value=>Escolha a Setor</option>");                                 result.forEach(function(option){                             $("#idSetor").append("<option value=" + option["idSetor"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                       $("#idSetor").on("change", function () {                                                       $.ajax({                 url: "_scripts/_php/_validacoes/buscarDadosCelulas.php",                 type: "POST",                 dataType: "json",                 data: {                       idSetor: $("#idSetor").val()                 },                 beforeSend: function() {                     $("#imgCarregando").css('display','block');                 },                 success: function (result) {                     $("#imgCarregando").css('display','none');                     $('#idCelula').find('option').remove();                             if (result == null){                         $("#idCelula").append("<option value=>Sem Celulas</option>");                     } else {                         $("#idCelula").append("<option value=>Escolha a Célula</option>");                                 result.forEach(function(option){                             $("#idCelula").append("<option value=" + option["idCelula"] + ">" + option["nome"] + "</option>")                         });                     }                 }                              });                          });                   }); Esse script, faz a população via $.ajax do jQuery de combos no form.
      Tudo funciona bem.
      Mas considere o o form abaixo:

       
      Imagine o que o usuário preencheu todos os campos e de repente resolve tocar a opção do select de Redes como está na figura.
      Porém, a opção Rede 2 NÃO possui Regiões Cadastradas ainda.
      No entanto, note que todos os campos abaixo estão preenchidos e isso não negaria um possível submit do form com dados errados?
      Ainda,  imagine a situação onde a opção Rede 2 POSSUI outas Regiões Cadastradas o que comprometeria a escolha dos selects que seguem
       
      Como contornar esse problema?
       
    • Por igoraraujowd
      Pessoal,
       
      Estou trabalhando em um teste A/B e preciso fazer uma modificação no código do menu. Estou utilizando o Mega Site Menu e preciso que o site fique sempre com o hamburger menu ainda que em desktop.
      https://codyhouse.co/gem/css-mega-site-navigation
       
      Pra fazer isso, eu precisaria fazer 2 alterações no código abaixo:
      https://ghostbin.com/paste/fjy3t
      1 - Alterar o valor da variável MqL
      2 - Anular as linhas abaixo na função moveNavigation:
      //navigation.insertBefore('.menu--mobile-header-cta'); //$('.nav-overlay').removeClass('is-visible'); A questão é que eu não posso fazer essas alterações diretamente no código e precisaria inserir algo em tags <script> que sobscrevesse a função e alterasse os pontos acima. É possível?
    • Por clickanapolis
      Pessoal peguei esse codigo de auto somar valor com quantidade na internet e não estou conseguindo ajustar ele.
       
      Ate que no total eu consegui incluir 2 casas decimais.
       
      Mais no subtotal não, e alem disso gostaria de colocar ele com extensão em moeda real o valor tipo:
       
      1500 para 1.500,00
       
      como eu faria:
       
      <script type="text/javascript"> $(window).load(function(){ function id( el ){ //return document.getElementById( el ); return $( el ); } function calcTotal( un01, qnt01 ) { return un01 * qnt01; } function getElementParent(event){ return event.srcElement.parentNode.parentNode.getAttribute('id'); } function getValorUnitario(elParent){ return $('#'+elParent+' .class_unit input').val(); } function getQuantidade(elParent){ return $('#'+elParent+' .class_quant input').val(); } function setFieldTotal(elParent, valueUnit, valueQuant){ id('#'+elParent+' .class_total input').val(calcTotal( valueUnit , valueQuant)); setTotalFinal(); } function setTotalFinal(){ var total = 0; $('#table-shop tr .class_total input').each(function(){ if(this.value != ''){ var valor = this.value; total += parseFloat(valor); } }); $('#total .value_total').html(total.toFixed(2)); $('#total .value_total').val(total.toFixed(2)); } $(document).ready(function(){ id('#table-shop tr .class_unit').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); id('#table-shop tr .class_quant').keyup(function(event) { var elemenPai = getElementParent(event); var valueUnit = getValorUnitario(elemenPai); var valueQuant = getQuantidade(elemenPai); setFieldTotal(elemenPai, valueUnit , valueQuant); }); }); }); </script>  
×

Informação importante

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