How to check radio button option and show corresponding HTML table

Asked

Viewed 3,276 times

1

Situation: We have three tables in the same form the first 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 is shown the two tables on the screen, I want to be shown only one that depends on the choice. How could the if to show a certain table? For example
if (code){ travel table }
if(othercode){ events table }

It is possible to do by PHP or has to be Javascript?

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

javascript php html

  • Vinicios can put the full code inside the if? And by the way, before IF the php tag is open?

  • @Sergio The complete code is very extensive but it is a table <table> in HTML full of inputs and the action button. the php tag was open yes. Question fixed. Thank you,

  • Okay, now I think you’re opening the tag <?php twice, the second in endif

  • Oops corrected once again missed : ?> in the question. I did so because so the HTML of <table> can be executed, the doubt now is how to pass the value of the choice of the radio button to a variable? Could be, so make the comparison and show the second or third table correctly.

  • If the radio button is changed/clicked by the user then it has to be with javascript. This is your case?

  • Yes it is! So there’s no way to do it with PHP in an if? ?

Show 1 more comment

1 answer

1


Here is 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 for tables to be hidden when the page opens
  • I added an extra table class to make it easier to have a selector that finds them
  • I gave the new tables an id and I’ll look for it by concatenating the radio button id to remove the hidden class
  • this solution uses jQuery

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

  • The CSS part I need to put necessarily into a style.css file and declare on the page?

  • @Vinicius, ideally in a separate file. If the page gets big then it is easy to forget that that code is on the page instead of the CSS file. But yes, it also works if you’re on the page, inside the tag <head> and within tags <style>: http://jsfiddle.net/9u5yx/2/

  • With Jquery I didn’t do very well but with Javascript I’ve made progress, now it hides the last two tables but when clicking it opens the selected table when switching to the other radio button it opens the other table and stays in it the two open tables regardless of which radio button you click. I can’t find my error, where I put Javascript?

  • @Vinicius, is there an error in javascript? (in the console) Regarding where to put, you can put it at the bottom of the page before the </body> and within tags <script>. In the example works as you want?

  • By Javascript it worked! by placing the javascript code after all tables. How would you put Jquery? Because here I could not generate action with it. Anyway. Thank you @Sergio

  • @Vinicius, to use jQuery (which is javascript) you need to load library using the script (tags included) that if find here. But if you don’t need it, pure javascript is enough.

  • I found an inconsistency just now... Could this method be breaking the form action? Because there are mandatory fields in all tables however the action is only activated when I fill in all required fields, the goal @Sergio is also to disable/remove the table not chosen. For the user to send only the data from the main table and the chosen table (trip or event). Does this code not do this correctly? How could it be done? From now on. Thank you.

  • @Vinicius, Hmmm thus becomes a little more complex. Which validate does it use? Test this idea: http://jsfiddle.net/4ZdZf/

  • In Jquery does not load any or other, as would be in pure javascript?

  • @Vinicius, have you tried adding the jQuery script to the head of the page? in pure javascript gets a lot of code and I doubt I can do it today still. By the way if you have an online link you can better test the problem.

  • <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />&#xA;<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> This in the page head tag. That’s it?

  • I also thought of something like this (http://stackoverflow.com/a/2688627) with something else to turn the tables back on because when selecting the option it opens but when selecting another option it closes the table and does not come back with the other.

  • @Vinicius, about jQuery yes, but only the second link. The first link can ignore, unless you need it. Regarding the second idea seems to me aggressive. In this case better use AJAX and load the table.

  • I’m almost giving up... Transforming the two tables into two different pages, making a next button on the main table and depending on the choice whether to change the action to a particular page with the table. And then I load the data from the main table manually with $_POST Simpler isn’t it? How could I change the action of the form by clicking on the radio button? Thanks in advance. Thank you for your patience.

  • @Vinicius is there a link where you can see the online page? There are many different ways and it’s hard to predict everything :) If both tables are in the same form then they go to PHP. Only if they’re disabled.

  • Following link. [https://www.dropbox.com/s/vn435ewy45ftzrh/solic_recursos.php . Thank you.

  • @Vinicius, the code works like this. The only thing wrong that I haven’t noticed before is your jQuery link. You’re using jQuery-ui, but it’s not the ui that you want, is this: <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> => Live version: http://jsfiddle.net/Svd8D/

  • Yes now the Jquery code worked but it doesn’t really remove the table because the action button doesn’t work yet. It only works if I go back to another table that I didn’t select and fill in the required fields.

Show 13 more comments

Browser other questions tagged javascript php html

You are not signed in. Login or sign up in order to post.