Popular table with data according to input range values

Question

Popular table with data according to input range values

Navigation

#1 by (3 votes)

0

I need to popular some li that form a table, according to the data put by the user in the input range, for example if the user choose 200,000 I would like to return 3 tables with suggestions of a plan of 200,000 a plan above and one below as an option.

I do not know if I need to save the information in a database, or just in a json, what is the best way to do this? I get only with javascript or I need a backend language (in the PHP case I'm already using in the project).

Well follow a link , what I need and described above is something like this consortium simulator of the site I passed. Just fill in (with same fake data) and see the end result. Does anyone suggest the best way to do this?

php mysql json tabela

asked by anonymous 31.08.2016 / 01:27

1 answer

Print variable in div with javascript Take current activity and put in another activity

score 3 · Answer 1

Good evening Erick,

If you just want to assemble the tables according to the user's input , there is no need for any back-end language, only a little JavaScript is enough. However, I imagine you want to save the user's choice to a database or a file, in which case you will need a back-end that will receive a request, asynchronous or synchronous) containing the user's choice and will treat it appropriately.

Well, I've developed here a quick minimalist code of how your idea of setting up a table using input range would look more like.

Well, this example should not be used in any production environment, it's just for you to understand the concept of using input range to fill a table according to values.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPEhtml><html><headlang="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>

I hope you have helped.