1

Situação: Temos três tabelas no mesmo formulário a primeira contém o radio button:

<td> <input required="required"
 value="Evento" name="tipo" id="evento" type="radio">
<label for="tipo">Evento.</label> <input required="required" value="Viagem" name="tipo" id="viagem" type="radio">
<label for="tipo">Viagem</label></td>

No momento é mostrada as duas tabelas na tela, quero que seja mostrada apenas uma que depende da escolha. Como poderia ser feito o if para mostrar determinada tabela? Por exemplo
if (código){ tabela sobre viagens }
if(outrocódigo){ tabela sobre eventos }

É possível fazer por PHP ou tem que ser Javascript?

Já tentei
<?php if($_POST['tipo']=='evento') : ?> tabela em HTML que eu quero mostrar <?php endif; ?> mas me dá o erro:
Undefined index: tipo

6
  • Vinicios pode colocar o codigo completo dentro do if? E já agora, antes do IF a tag de php está aberta?
    – Sergio
    12/03/2014 às 6:17
  • @Sergio O código completo é muito extenso mas é uma tabela <table> em HTML cheio de inputs e o action button. a tag php estava aberta sim. Pergunta corrigida. Obrigado,
    – Vinicius
    12/03/2014 às 6:30
  • Ok, agora parece-me que está a abrir a tag <?php duas vezes, a segunda no endif
    – Sergio
    12/03/2014 às 6:33
  • Oops corrigi mais uma vez faltou : ?> na pergunta. Fiz dessa maneira pois assim o HTML da <table> pode ser executado, a dúvida agora é como passar o valor da escolha do radio button para uma variável? Poderia ser, assim fazer a comparação e mostrar a segunda ou terceira tabela corretamente.
    – Vinicius
    12/03/2014 às 6:39
  • Se o radio button fôr mudado/clicado pelo utilizador então tem de ser com javascript. É esse o seu caso?
    – Sergio
    12/03/2014 às 6:40

1 Resposta 1

1

Aqui fica uma sugestão:

$('input[type="radio"]').on('click', function () {
    $('.tabelaextra').addClass('escondida')
    $('#t' + this.id).removeClass('escondida');
});

Exemplo

Neste exemplo fiz:

  • adicionei uma classe escondida para as tabelas estarem escondidas quando a página abre
  • adicionei uma classe tabelaextra para ser mais fácil ter um selector que as encontre
  • dei às novas tabelas um id e vou procurá-la concatenando o id do radio button para remover a classe escondida
  • esta solução usa jQuery

Se precisar de uma solução só com javascript puro, pode usar esta (link).

18
  • A parte de CSS eu preciso colocar necessariamente em um arquivo style.css e declarar na página?
    – Vinicius
    12/03/2014 às 8:00
  • @Vinicius, idealmente num ficheiro à parte. Se a pagina fica grande depois é fácil esquecer que aquele código está na página em vez do ficheiro CSS. Mas sim, funciona também se estiver na página, dentro da tag <head> e dentro de tags <style>: jsfiddle.net/9u5yx/2
    – Sergio
    12/03/2014 às 8:02
  • Com o Jquery não fui muito bem Mas com o Javascript TIVE progresso, agora ele esconde as duas ultimas tabelas mas ao clicar ele abre a tabela selecionada ao trocar para o outro radio button ele abre a outra tabela e fica nisso as duas tabelas abertas independente de qual radio button se da o clique. Não consigo encontrar o meu erro, aonde eu coloco o Javascript?
    – Vinicius
    12/03/2014 às 8:48
  • @Vinicius, tem algum erro no javascript? (na consola) Em relação a onde colocar, pode pôr no fim da página antes do </body> e dentro de tags <script>. No exemplo funciona como você quer?
    – Sergio
    12/03/2014 às 8:59
  • Por Javascript funcionou! colocando o código javascript depois de todas as tabelas. Como se colocaria o Jquery? Pois aqui eu não consegui gerar ação com ele. Enfim. Muito Obrigado @Sergio
    – Vinicius
    12/03/2014 às 9:03

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .