1

Preciso que quando o usuário clicar sobre o botão "BUSCAR/CONFIRMAR" abra uma nova janela no navegador pedindo para SELECIONAR uma das categorias que vem diretamente do banco de dados, e ao selecionar a mesma janela fecha e o valor escolhido vai pro campo e só seria possível mudar a categoria clicando no botão "LIMPAR CAMPO" e fazendo todo processo novamente.

É tudo através de javascript, mas infelizmente não tenho esse conhecimento.

Input e os botões: (O input por padrão é desativado):

  <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>

Categorias.php (Nova janela)

        <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>

1 Resposta 1

0

Adicione um onclick em cada <a> para chamar duas funções: uma para abrir a nova janela e outra para limpar o campo:

<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>

E adicione o script com as funções:

<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>

Onde tem "..." no window.open você pode definir as propriedades da janela (veja aqui as opções).

No arquivo categorias.php você deve dar um mesmo name para cada input radio, por exemplo:

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

E nesse mesmo arquivo categorias.php, insira o 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>

Ao selecionar um radio, o seu value será lançado no input da página principal e a janela se fechará.

1
  • Obrigado amigo, funcionou perfeitamente!
    – user89739
    Commented 9/04/2018 às 17:30

Você deve fazer log-in para responder a esta pergunta.