pass parameter to another html page

Question

good night need help in html.... I’m not getting the parameter passed correctly to another html page.

page 1 is a table that is the vacancy list. By clicking the vacancy button, make the request for the details page. The details page is another form, with all the details of that selected vacancy. The problem is that I can’t do the function that calls the detail of the selected id wave.

Code

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-10 col-md-10 col-sm-offset-1 col-md-offset-1 main">
      <h2 class="page-header">
        Vagas Trabalhadas
        <div class="pull-right">
            <a onclick="generatefile();" class="btn btn-success">Exportar Vagas</a>
        </div>
      </h2>

      <div class="table-responsive">
        <table id="example" action="_class/load_vagas.php" name="listavagas" class="table table-striped table-bordered" cellspacing="0" width="100%">
          <thead>
            <tr>
              <th valign="middle">RP</th>
              <th valign="middle">Area Atuacao</th>
              <th valign="middle">Alocacao</th>
              <th valign="middle">Data Recebimento</th>
              <th valign="middle">Data Recrutamento Inicio</th>
              <th valign="middle">Status</th>
              <th valign="middle">Pendencia</th>
              <th valign="middle">Analista Universia</th>
              <th align="center" valign="middle">Detalhes da Vaga</th> 
              </tr>
          </thead>

           <tbody>
            <?php foreach($return[0] as $k => $v): ?>
            <tr id-vaga="<?= $v->id_vaga; ?>">

              <td valign="middle" class="Rp"><?= $v->rp; ?></td>
              <td valign="middle" class="AreaAtuacao"><?= $v->area_atuacao; ?></td>
              <td valign="middle" class="Alocacao"><?= $v->alocacao; ?></td>
              <td valign="middle" ><?= dataToSite($v->data_recebimento); ?></td>
              <td valign="middle" ><?= dataToSite($v->recrutamento_inicio); ?></td>
              <td valign="middle" ><?= $v->status; ?></td>
              <td valign="middle" ><?= $v->pendencia; ?></td>
              <td valign="middle" ><?= $v->analista_responsavel; ?></td> 


              <td align="center" valign="middle">
              <img src="imgs/plus.png" width="30" height="30" alt="Mais informações" style="cursor:pointer" id="btnloaddetalhes" name="btnloaddetalhes" onclick="loaddetalhes('<?= $v->id_vaga; ?>');"></td>
             </tr> 

            <?php endforeach; ?>

          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

---

the problem is in onclick="loaddetalhes('id_vaga; ?>');".... how to take the id_vaga to the next html page. This data will be used to load all the detailed page information.

I’m doing this: but I couldn’t recover the parameter

function loaddetalhes(idVaga) {
    document.getElementById("id_vaga").innerHTML = idVaga;
    sessionStorage.setItem('id_vaga', idVaga);
    window.open('detalhes_vaga.php');
}

when I gave the window.open, I had the parameter recovered, to use it in the data load with php, but I could not return with the 'id_vaga'...vlw

Answer 1

In html you can use sessionStorage to pass the parameter.

sessionStorage.setItem('key', value);

and to recover:

sessionStorage.getItem('key');

In your case it would look like this:

Html 1

function loaddetalhes(id_vaga)
{
    sessionStorage.setItem('id_vaga', id_vaga);
    ...    
}

Html 2

function loadVaga()
{
    var id_vaga=sessionStorage.getItem('id_vaga');
    ...
}

Answer 2

I think that could be simpler. You just want to return data from the server, so just use the http GET method in the page request details by passing the vacancy id. Something more or less like this:

<a href="detalhes_vaga.php?id=<?php echo $v->id_vaga; ?>">
    <img src="imgs/plus.png" width="30" height="30" alt="Mais informações"
    style="cursor:pointer" id="btnloaddetalhes" name="btnloaddetalhes">
</a>

On the detailed page_vacancies.php you get the last id (example: $_GET['id']) and makes the query in the bank and returns the same or another page as a result. Optionally you can remove the onclick from the img tag, unless you want to eventually make an ajax request.