0

Preciso popular alguns li que formam uma tabela, de acordo com os dados colocados pelo usuário no input range, por exemplo se o usuário escolher 200.000 gostaria que me retornasse 3 tabelas com sugestoes de um plano de 200.000 um plano acima e uma abaixo como opção.

Não sei se preciso salvar as informações em um banco de dados, ou somente em um 'json', qual a melhor forma de fazer isso? Consigo so com javascript ou preciso de uma linguagem backend (no caso PHP que ja estou usando no projeto).

Bom segue um link, o que preciso e descrevi acima é algo igual esse simulador de consórcio do site que passei. Basta preencher (com dados fake mesmo) e ver o resultado final. Alguem me sugere a melhor forma de fazer isso?

1 Resposta 1

2

Boa noite Erick,

Se você quer apenas montar as tabelas de acordo com o input do usuário, não é necessário de nenhuma linguagem back-end, apenas um pouco de JavaScript é o suficiente. No entanto, eu imagino que você queira salvar a escolha do usuário em um banco de dados ou num arquivo, daí neste caso, você irá necessitar de um back-end que vai receber uma requisição, (Seja ela assíncrona ou síncrona) contendo a escolha do usuário e irá trata-la de maneira adequada.

Bom, eu desenvolvi aqui rapidinho um código minimalista de como ficaria mais ou menos sua ideia de montar uma tabela utilizando input range.

Veja bem, esse exemplo não deve em hipótese alguma ser utilizado em um ambiente de produção, é apenas para você entender o conceito de utilizar um input range para preencher uma tabela de acordo com os valores.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Range</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

  <script>
    window.onload = function() {
      var range = document.getElementById("crange");
      var range_result = document.getElementById("range-result");
      var gerar = document.getElementById("gerar");
      var tabelas = document.getElementById("tabelas");
      range.oninput = function() {
        range_result.innerHTML = range.value + " R$";
      }

      gerar.onclick = function() {

        var div1 = document.createElement("div");
        var div2 = document.createElement("div");
        var div3 = document.createElement("div");

        div1.className = "col-lg-4 col-md-4 col-sm-4";
        div2.className = "col-lg-4 col-md-4 col-sm-4";
        div2.className = "col-lg-4 col-md-4 col-sm-4";
        div1.style.border = "1px solid";
        div2.style.border = "1px solid";
        div3.style.border = "1px solid";

        div1.innerHTML = range.value - 100;
        div2.innerHTML = range.value;
        div3.innerHTML = parseInt(range.value) + 100;

        tabelas.innerHTML = "<div class='col-lg-12'>Suas opções são: </div>";

        tabelas.appendChild(div1);
        tabelas.appendChild(div2);
        tabelas.appendChild(div3);
      }
    }
  </script>

</head>

<body>
  <div class="container">
    <div class="row">
      <input class="input" type="range" id="crange" step="20" min="0" max="500" value="0" />
      <span id="range-result">0 R$</span>
    </div>
    <div class="row">
      <button type="button" class="btn btn-default" id="gerar">Gerar tabelas</button>
    </div>
    <div class="row" id="tabelas">
    </div>
  </div>

</body>

</html>

Espero que tenha ajudado.

3
  • Oi boa noite primeiramente muito obrigado pela paciencia em responder, bom a parte de salvar os dados que o usuario preencheu no form eu ja fiz, faltava somente essa parte de mostrar as tabelas montadas com os dados, acho que o que vc fez vai me ajudar bastante, porem ficou uma duvida, aonde posso guardar as informações que vão ser exibidas nas tabelas? em um json? pq cada valor escolhido no range vai conter um tabela com infos, igual o link que postei. mais uma vez obrigado e vou estudar a sua sugestão acho que vai me ajudar bastante.
    – user27585
    Commented 31/08/2016 às 0:25
  • Você se refere a guardar as informações para manipular na mesma página mesmo? Ou guardar as informações externamente, para futuras buscas? Se for externamente, você pode enviar em formato json mesmo para ua linguagem back-end e salvar da maneira que quiser. Se for apenas para manipular na página, não é necesário nenhum json, apenas refaça os calculos do range.value ou se preferir, crie variáveis para salvar os valores. Commented 31/08/2016 às 0:32
  • Sim elas vao ser mostradas na mesma pagina não vou guardar nenhum valor de tabela somente o que o usuario preencher no form essa parte ja consegui salvar no no bd, não sei se deu uma olhada no site q postei mas eh exatamente aquilo, so que depende do valor do input qual tabela sera apresentada. obg
    – user27585
    Commented 31/08/2016 às 1:21

Você deve fazer log-in para responder a esta pergunta.