Search/confirm button and clear field

Question

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

It’s all through javascript, but unfortunately I don’t have that knowledge.

Input and buttons: (Default input 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>

Answer 1

Add a onclick in 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 has "..." in the window.open you can define the properties of window (see here the options).

In the archive categorias.php you should give one yourself name for each input radio, for example:

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

And in that same file categorias.php, insert 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 selecting a radio, your value will be released in the input from the main page and the window will close.