Popular table with data according to input range values

Asked

Viewed 659 times

0

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

I don’t know if I need to save the information in a database, or just a json, what’s the best way to do that? I can only use javascript or I need a backend language (in the case of PHP I’m already using in the project).

Good follows a link, What I need and described above is something like this consortium simulator of the site I passed. Just fill (with fake data same) and see the final result. Someone suggests me the best way to do this?

php mysql json table

1 answer

2

Good night Erick,

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

Well, I quickly developed a code here minimalist how your idea of setting up a table using input range.

You see, this example should not under any circumstances be used in a production environment, it is only for you to understand the concept of using a input range to fill a table according to the values.

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

I hope it helped.

  • Hi good night first thank you very much for the patience in responding, well the part of saving the data that the user filled in the form I already did, it was only missing that part of showing the tables assembled with the data, I think what you did will help me a lot, but there was a doubt, where can I save the information that will be displayed in the tables? in a json? pq each value chosen in the range will contain a table with Infos, equal to the link I posted. thanks again and I will study your suggestion I think it will help me a lot.

  • Do you mean saving the information to manipulate on the same page? Or store the information externally for future searches? If it’s externally, you can send it in json format even to your back-end language and save it the way you want. If it is only to manipulate on the page, no json is required, just redo the calculations of range.value or if you prefer, create variables to save values.

  • Yes they will be shown on the same page I will not save any table value only what the user fill in the form that part has already saved in the bd, I do not know if I took a look at the site q posted but it is exactly that, only it depends on the input value which table will be displayed. obg

Browser other questions tagged php mysql json table

You are not signed in. Login or sign up in order to post.