Problems passing URL parameter

Question

In the code below, how do I get the values of input IdObra and IdCliente and go through the url <a href="<?=base_url("/index.php/ProdutosObras")?>"? I’m using a modal.

<div class="tab-content">
    <div id="geraisObras" class="tab-pane fade in active">
    <br>
    <div class="form-group">
        <input type="hidden" type="text" class="form-control" id="idObra" name="idObra" value="idObra">
    </div>


    <div class="form-group">
        <input type="hidden" type="text" class="form-control" id="clienteObra" name="clienteObra" value="clienteObra">
    </div>

    <div class="form-group">

        <label for="nomeObra">Nome Obra</label>
        <input type="text" class="form-control" id="nomeObra" autofocus name="nomeObra">
    </div>


    <div class="form-group">
        <label for="valorObra">Valor Obra</label>
        <input type="text" class="form-control" id="valorObra" name="valorObra">
    </div>

    <div class="form-group">
        <label for="tipoObra">Tipo Obra</label>
        <input type="text" class="form-control" id="tipoObra" name="tipoObra">
    </div>
    <div class="form-group">  
        <label>Status Obra</label>
        <select class="form-control" name="statusObra" id="statusObra">
            <option value="Em andamento">Em andamento</option>
            <option value="Finalizada">Finalizada</option>
            <option value="Parada">Parada</option>
        </select>
    </div>
</div>

<br><br>

<div id="clienteObras" class="tab-pane fade">
    <?php

        echo "<div class='form-group' type='hidden'>";
        echo "<label hidden>Cliente</label>";
        echo "<select  class='form-control' name='clienteObra' id='clienteObra'>";
        foreach ($clientes as $cliente):
        {
          echo "<option value='$cliente[id_cliente]'>$cliente[nomeCliente]</option>";
        }
        endforeach;
        echo "</select>";
        echo "</div>";
    ?>
</div>

<div id="produtosObras" class="tab-pane fade">
    <a href="<?=base_url("/index.php/ProdutosObras")?>" class="button" target="_blank">Adicionar Produtos</a>
</div>

Answer 1

You can add a click event to this button and do a function with javascript to concatenate the input values with the url, for example :

<button onclick="produtosObras()" id="btnUrl" href="<?=base_url("/index.php/ProdutosObras/")?>" class="button" target="_blank">Adicionar Produtos</button>

<script>
   function produtosObras(){

      var url = document.querySelector("#btnUrl").getAttribute('href');

      url += '/?idObra=' + document.querySelector('#IdObra').value;
      url += '/&idCliente=' + document.querySelector('#IdCliente').value;

      window.location.href = url;

   } 
</script>

Answer 2

At the event onclick the values recovered through the Javascript function are assigned to the respective parameter keys document.getElementById that serves to return an element of the DOM that is identified by a specific ID.

<a href='' onclick="this.href='<?=base_url("/index.php/ProdutosObras")?>?p='+document.getElementById('idObra').value+'&q='+document.getElementById('clienteObra').value">update</a>

I don’t know if that part <?=base_url("/index.php/ProdutosObras")?> is correct, by the way, I had never seen it before. However I did a test with the example below where I replace <?=base_url("/index.php/ProdutosObras")?> for https://answall.com and works well:

<input type="hidden" type="text" class="form-control" id="idObra" name="idObra" value="Value_idObra">
<input type="hidden" type="text" class="form-control" id="clienteObra" name="clienteObra" value="Value_clienteObra">

<a href='' onclick="this.href='https://answall.com?p='+document.getElementById('idObra').value+'&q='+document.getElementById('clienteObra').value">update</a>