How to check radio button option and show corresponding HTML table

1

Situation: We have three tables in the same form the first one contains the 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>

At the moment the two tables are shown on the screen, I want to show only one that depends on the choice. How could if be done to show certain table? For example
if (code) { travel table }
if (othercode) { events table }

Is it possible to do by PHP or have to be Javascript?

I've already tried <?php if($_POST['tipo']=='evento') : ?> tabela em HTML que eu quero mostrar <?php endif; ?> but it gives me the error: Undefined index: type

    
asked by anonymous 12.03.2014 / 06:19

1 answer

1

Here's a suggestion:

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

Example

In this example I did:

  • I added a hidden class so that the tables are hidden when the page opens
  • I've added a tableextra class to make it easier to have a selector that finds it
  • I gave the new tables an id and I will search for it by concatenating the id of the radio button to remove the hidden class
  • This solution uses jQuery

If you need a pure javascript-only solution, you can use this (link) .

    
12.03.2014 / 08:18