Filter with select using Javascript and php

Question

Hi, I’m trying to make a filter according to the option that is chosen in a <select>. I have a button that executes the function created in javascript. I have variables declared in php, and I would like to know how to use them in javascript... When I call them directly in my "< H3 >" comes with the correct value, I do not know where I am missing in the function to call according to the select. If anyone can help me, I’d be grateful.

This is my code: PHP (I am aware that the 4 variables with "Pdo" have the same destination, I only left prepared for when consulting the other db)

<?php

$pdo = new PDO('sqlite:C:Desktop\dashboard.db') or die("Erro ao abrir a base");

$pdo1 = new PDO('sqlite:C:Desktop\dashboard.db') or die("Erro ao abrir a base");
$pdo2 = new PDO('sqlite:C:Desktop\dashboard.db') or die("Erro ao abrir a base");
$pdo3 = new PDO('sqlite:C:Desktop\dashboard.db') or die("Erro ao abrir a base");
$pdo4 = new PDO('sqlite:C:Desktop\dashboard.db') or die("Erro ao abrir a base");

$regiao1NRows = $pdo1->query('SELECT count(*) from DEVICES')->fetchColumn();
$regiao2NRows = $pdo2->query('SELECT count(*) from DEVICES')->fetchColumn();
$regiao3NRows = $pdo3->query('SELECT count(*) from DEVICES')->fetchColumn();
$regiao4NRows = $pdo4->query('SELECT count(*) from DEVICES')->fetchColumn();

$totalNRows = $regiao1NRows+$regiao2NRows+$regiao3NRows+$regiao4NRows;

//var_dump($totalNRows);

?>

This is the HTML that has select and the button that calls the function... :

<header class="container">

  <label for="regiao_filtro">Selecione a região:</label>
  <select onchange="filtroregiao(this)" id="regiao_filtro">
    <option value="regiaoTodos">Todas</option>
    <option value="regiao1">1</option>
    <option value="regiao2">2</option>
    <option value="regiao3">3</option>
    <option value="regiao4">4</option>
  </select>

  <button type="submit" onclick="filtroregiao()" value="Pesquisa">Pesquisar</button>

      <h3 id="devicesCaptados"></h3>

Here is Javascript with the function and comparisons:

function filtroregiao(){

let regiao  = $(".regiao_filtro").val();
let dados = document.getElementById('devicesCaptados');

if(regiao == "Todos"){
dados = $totalNRows;
}else if(regiao == "regiao1"){
dados = $regiao1NRows;
}else if(regiao == "regiao2"){
dados = $regiao2NRows;
}else if(regiao == "regiao3"){
dados = $regiao3NRows;
}else if(regiao == "regiao4"){
dados = $regiao4NRows;
}

}

Answer 1

So instead of clicking the send request button because you don’t try to use an onchange() in select, check it out:

HTML:

<label for="regiao_filtro">Selecione a região:</label>
<select onchange="filtroregiao(this)" id="regiao_filtro">
    <option value="regiaoTodos">Todas</option>
    <option value="regiao1">1</option>
    <option value="regiao2">2</option>
    <option value="regiao3">3</option>
    <option value="regiao4">4</option>
 </select>

JS:

function filtroregiao(){

let regiao  = $("#method").val();
let dados = document.getElementById('devicesCaptados');

if(regiao == "regiaoTodos"){
    fetch(`sua/api?dados=` + regiao) //Utiliza Fecth para fazer a requisição para seu script php
        .then(function (response) {
            if (response.status !== 200) { //Caso o servidor devolva outro status HTTP que não for 200
                alert("Aconteceu um erro");
                return;
            }

            response.json().then(function (data) { //Pega os dados retornados em formato JSON
                dados.innerHTML = data;
            })
        }).catch(function (err) { // Tratamento de erro caso a URL der problema
        console.log("Error", err);
    })

} else {

}

}

To start standardizing your code start returning the answer always in JSON will be easier to handle errors and answers.

And instead of var_dump use print_r()