Show/hide table using button in php page

Question

Hello,

I want to display a data table when i click a button in the same php page. The button is used in a form with other inputs such as some text. The data table is hide by default. And it get the values from the form, and then make a query in database and display them in it.

How can i achieve the function of display/hide ?

Do you have any solutions?

Thanks.

Answer 1

its a simple ajax issue, you can use any popular java script library to achieve this functionality to perform ajax calls and show/hide table. for example, you can use jquery's ajax functionality to get the data from the server and then use jquery's built in effects to show the table enclosed in div (may be like this $("#mydiv").show())

Answer 2

If you're okay with using Javascript, give your table tag an id attribute. Then, have an onclick event on the button that alters the CSS of the table to be display:none. Alter the Javascript of the button so that the next time it is clicked, it toggles the table CSS to be display:table. You could also use a Javascript library, such as Prototype, to do this.

<table id="myTable">
</table>

<input id="toggleButton" type="button" onclick="hideTable(true);" value="Toggle Table" />

And the Javascript might be:

function toggleDisplay(var hide) {
  if (hide) {
    document.getElementById('myTable').style.display = "none";
    document.getElementById('toggleButton').onclick = hideTable(false);
  } else {
    document.getElementById('myTable').style.display = "table";
    document.getElementById('toggleButton').onclick = hideTable(true);
  }
}

Take that Javascript with a grain of salt; I haven't written any in a while.

If you don't want to use Javascript, then have the button submit a regular HTML form. Pass along in the form some input name such as hide_table with a value of true. On the server, if $_POST['hide_table'] == "true", don't allow the table to be output as HTML to the page. Also, toggle the form such that clicking the button will submit hide_table with a value of false.

<form method="post" action="the_same_page.php">
  <input type="hidden" name="hide_table" value="<?php echo $_POST['hide_table'] == "true" ?>" />
  <input type="button" value="Toggle Table" />
</form>

<?php if ($_POST['hide_table'] != "true") { ?>
  <table>
  </table>
<?php } ?>

If you wanted to use AJAX to only load the table content when the user decides to show it, it would be nice to make this degrade gracefully. If a user doesn't have Javascript enabled, the form should actually submit to the server and reload the page, toggling the table display. However, if the user does have Javascript enabled, an AJAX call could be made, load the table, and display it in-place.

Answer 3

Assuming that you want to do this client side (ie all data is sent to the client on page load) all you need to do is something thusly: (done with prototype for brevity)

...
<input type="button" id="showTableBtn" value="Show Table">
<table id="dataTable">
    ...
</table>

<script type="text/javascript">
<!--
Event.observe($("showTableBtn"), "click", toggleTable);

function toggleTable() {
    if ($("showTableBtn").value == "Show Table") {
         $("dataTable").show();
         $("showTableBtn").value = "Hide Table";
    } else {
         $("dataTable").hide();
         $("showTableBtn").value = "Show Table");
    }
}

//-->
</script>
...