Search / confirm button and clear field

1

I need the user to click on the SEARCH / CONFIRM button to open a new browser window by asking SELECT one of the categories that comes directly from the database , and selecting the same window closes and the value chosen goes to the field and it would only be possible to change the category by clicking the "CLEAN FIELD" button and doing the whole process again.

It's all through javascript, but unfortunately I do not have this knowledge.

Input and buttons: (Input by default is disabled):

  <div class="input_field"><label for="num"><b>Categoria</b>            :</label>
        <input type="text" disabled="disabled" name="categoria" size="65"><br>
        <div style="margin-left:105px;"><a class="busca"><font color='#FFFFFF'>Buscar/Confirmar</font></a>
       <a class="voltar"> <font color='#FFFFFF'>Limpar o Campo</font></a></div><br>
        </div>

Categories.php (New window)

        <table width="100%">
           <thead>
            <tr>
 <th><center><font class="cinza_peq">Selecione</font></center></th>
    <th><center><font class="cinza_peq">ID</font></center></th>
    <th><center><font class="cinza_peq">Nome da Categoria</font></center></th>

</tr>
</thead>
<?php
$sql_pai = "SELECT * FROM cms_news_cat ORDER BY ID";
$res_pai = mysql_query($sql_pai) or die(mysql_error());
while($row=mysql_fetch_array($res_pai)){ ?>

 <td><center><input type="radio" value="<?php echo $row['nome']; ?>" /></center></td>
<td><center><?php echo $row['id']; ?></center></td>
<td><center><?php echo $row['title']; ?> <u></u> </center></td>

</tr>
    <?php } ?>
        <tr>
    </tbody>
        </table>
    
asked by anonymous 09.04.2018 / 18:26

1 answer

0

Add onclick to each <a> to call two functions: one to open the new window and one to clear the field:

<a class="busca" onclick="janela()"><font color='#FFFFFF'>Buscar/Confirmar</font></a>
<a class="voltar" onclick="limpar()"> <font color='#FFFFFF'>Limpar o Campo</font></a>

And add the script with the functions:

<script>
function janela(){
   if(document.body.querySelector("input[name='categoria']").value == '') window.open("categorias.php", "categorias", "...");
}

function limpar(){
   document.body.querySelector("input[name='categoria']").value = '';
}
</script>
  

Where you have "..." in window.open you can set the properties of the   window ( see options here ).

In the file categorias.php you should give the same name for each input radio , for example:

<input type="radio" name="categoria" value="<?php echo $row['nome']; ?>" />

And in this same file categorias.php , enter the script:

<script>
document.addEventListener("DOMContentLoaded", function(){
   var radios = document.body.querySelectorAll("input[type='radio']");

   for(var x=0; x<radios.length; x++){

      radios[x].addEventListener("click", function(){

         window.opener.document.body.querySelector("input[name='categoria']").value = this.value;
         self.close();

      });

   }
});
</script>

When you select a radio , your value will be posted to input of the main page and the window will close.

    
09.04.2018 / 19:15