Using Ajax to post a variable to another PHP file

Question

Well, here is my question. So, I have a table, displaying some data using PHP and SQL like this:

Then, as I showed in that pic, I want to click that button, get the ID value and with that, do another SQL sentence and show another table in another PHP file that I have.

My problem is, that as its mentioned here you cant really use AJAX to send it and then redirect. And im literally new to AJAX and JavaScript...

Of course, i know other ways like <form> and its submit element, but I already have one <form> in there, used for displaying the rows of the table, and receive new data input. So if I use form, I would have to nest them, which doesn't work.

I was trying this:

Table file (Where i have the id that i want to send)

<script>
      function openCateg(id) {
        $.ajax({
            data: {variable: id},
            url: 'categoriasSentenciasAJAX.php',
            type: "POST",
            success: function(data) {
              alert(data);
            }
        });
        //window.location = "categoriasSentenciasAJAX.php";
      }
    </script>

categoriasSentenciasAJAX.php (Where i wanna receive the data)

 $q = $_POST['variable'];

I also tried the GET method, just calling:

window.location = "categoriasSentenciasAJAX.php?variable=" + id;

and

 $q = $_GET['variable'];

Actually, it did work, but when i reload the site, it doesn't cause the variable becomes null.

My Table (generated from a SQL sentence in PHP, a basic SELECT

<form method="post" onsubmit="return confirm('¿Desea actualizar los datos?')">
        <table class="w3-table w3-striped w3-bordered" id ="table" width="70%" border="1px">
          <thead>
            <tr class="w3-theme">
                <th>IDEmpresa</th>
                <th>Usuario</th>
                <th>Nombre*</th>
                <th>Direccion*</th>
                <th>Ambito*</th>
                <th>Color*</th>
                <th>Categoria</th>
            </tr>
          </thead>

          <tbody>
            <?php
            foreach ($row as $key => $row) {
                ?>
                <tr class="w3-white">
                    <td><input type="text" class="w3-input" readonly="readonly" name="idE[]" value="<?php echo $row["idEmpresa"]?>" required/></td>
                    <td><input type="text" class="w3-input" readonly="readonly" name="idU[]" value="<?php echo $row["Usuario"] ?>" required /></td>
                    <td><input type="text" class="w3-input" name="nombre[]" value="<?php echo $row["Nombre"] ?>" required /></td>
                    <td><input type="text" class="w3-input" name="direccion[]" value="<?php echo $row["Direccion"] ?>" required /></td>
                    <td><input type="text" class="w3-input" name="ambito[]" value="<?php echo $row["Ambito"] ?>" required /></td>
                    <td><input type="color" class="w3-input-color" name="color[]" value="<?php echo rgb2hex2rgb($row["Color"]) ?>" /></td>
                    <td >
                      <button id="cat" type="button" name="button[]" class="w3-btn w3-dark-grey w3-hover-light-grey" onclick="openCateg(<?php echo $row["idEmpresa"]?>);">Categorias</button>
                    </td>
                </tr>
                <?php
            }
            ?>
          </tbody>
        </table>
      </div>
    </div>
        <br>
        <div class="w3-center">
          <div class="w3-padding-32">
            <input type="submit" class="w3-btn w3-xlarge w3-dark-grey w3-hover-light-grey" value="Actualizar Empresas" name="update">
          </div>
        </div>
    </form>

So, in summary, i just wanna click that button showed in the pic, get the id and use it to send it to another file, where i will call a SQL sentence to show another table. I would like to redirect to the new php file if possible too.

Just want to send the variable to the other php file without dissapearing when i press the refresh button of the browser.

Excuse my poor English, please...

Thanks in advance!

Answer 1

If your value becomes null when you refresh then try setting the value which you are passing as default value.

document.getElementById("button_id").defaultValue = id;

Answer 2

Why you want it to be redirected?post your value and get the response,on success you can do everything you want.

function OpenCateg(id)
{
variable = id;
$.ajax({
type: "POST",
url: "categoriasSentenciasAJAX.php?variable="+id,
success: function(data){
window.location = "categoriasSentenciasAJAX.php";

},
error: function(data){ alert('Error occured'); }});}

Answer 3

try this:

 function openCateg(id){
     window.location.assign('categoriasSentenciasAJAX.php?id='+id);
 }

Answer 4

Since you still redirect to the same categoriasSentenciasAJAX.php page, then you don't need ajax. Just use hyper-link. Change this:

<td >
    <button id="cat" type="button" name="button[]" class="w3-btn w3-dark-grey w3-hover-light-grey" onclick="openCateg(<?php echo $row["idEmpresa"]?>);">Categorias</button>
</td>

To this:

<td>
    <a href="categoriasSentenciasAJAX.php?variable=<?php echo $row["idEmpresa"] ?>" class="w3-btn w3-dark-grey w3-hover-light-grey">Categorias</a>
</td>

Use $_GET array:

$q = $_GET['variable'];

Also you'll probably have to adjust CSS styles of element so it would look as your button now, but I think that shouldn't be much problem =)

If page at URL categoriasSentenciasAJAX.php with variable param crashes on reload, then problem should be in this php file. We need it's code here and error message in order to understand what's going on.