How Can I Make an Invisible Mode in PHP?
PHP is a popular scripting language that can alter the look of a Web page based on a user action. This can include hiding one element and making another visible at the same time. This is accomplished by using PHP in the CSS code to alter the display attributes of those two elements. The technique can be used with a poll to make the question disappear and the answers appear when the user presses the "Vote" button. Experiment with a sample poll to see how this type of invisible mode works.
Other People Are Reading
Instructions
-
-
1
Create three divs within the body of your HTML document and give them IDs of "poll_wrap," "poll" and "poll_answers." The "poll" and "poll_answers" divs will stack inside the "poll_wrap" div:
<div id="poll_wrap">
<div id="poll">
</div>
<div id="poll_answers">
</div>
</div>
-
2
Create a form inside the "poll" div and ask the question "What is your favorite animal?" Use radio buttons to set up the values of "Dog," "Cat" and "Horse." Give the "Vote" button the name attribute of "submit." When the user clicks the "Vote" button, the action will generate a superglobal $_POST array that will contain "submit' as one of its array elements.
<div id="poll">
<h3>What is your favorite animal?</h3>
<form action="" method="post">
<input type="radio" name="poll_values" id="poll_values" value="dog" />Dog
<input type="radio" name="poll_values" id="poll_values" value="cat" />Cat
<input type="radio" name="poll_values" id="poll_values" value="horse" />Horse</br>
<input name="submit" type="submit" id="submit" value="Vote" />
</form>
</div>
-
-
3
Create sample answers within the "poll_answers" div that will be static for the purposes of the example:
<div id="poll_answers">
<h2>Sample answers</h2>
<p>Dog: 2</p>
<p>Cat: 2</p>
<p>Horse: 2</p>
</div>
-
4
Create CSS coding between the head tags of your HTML page for the three divs. Style the "poll_wrapper" div to give it a width and background color to provide some dimension for the test. Style the "poll" div using PHP coding to test if "submit" exists in the $_POST array. If it does, use the PHP "echo" function to generate a display attribute of "none." When the "Vote" button is pressed, the "poll" div will be hidden, allowing the "poll_answers" div to move up. Style the "poll_answers" div using similar PHP coding to test for "submit." In this case, set up an "if else" test. If "submit" exists, set the display attribute to "block," meaning the "Vote" button has been pressed and the answers will show up. Otherwise, set the display to "none." The answers will be hidden while the "Vote" button has not been clicked.
<head>
<style type="text/css">
#poll_wrap {
width:200px;
background-color:#CCC;
padding:10px 10px 30px 10px;
}
#poll {
<?php
if (array_key_exists('submit', $_POST)) {
echo "display:none;"; } ?>
}
#poll_answers {
<?php
if (array_key_exists('submit', $_POST)) {
echo "display:block;"; }
else {
echo "display:none;";
}
?>
}
</style>
</head>
-
5
Save your page with a .php extension and test it on a PHP server or using an online PHP code emulator. A gray box should appear with the poll questions. When you press the "Vote" button, the questions should become hidden and the sample answers visible in their place. The full code appears as follows:
<html>
<head>
<style type="text/css">
#poll_wrap {
width:200px;
background-color:#CCC;
padding:10px 10px 30px 10px;
}
#poll {
<?php
if (array_key_exists('submit', $_POST)) {
echo "display:none;"; } ?>
}
#poll_answers {
<?php
if (array_key_exists('submit', $_POST)) {
echo "display:block;"; }
else {
echo "display:none;";
}
?>
}
</style>
</head>
<body>
<div id="poll_wrap">
<div id="poll">
<h3>What is your favorite animal?</h3>
<form action="" method="post">
<input type="radio" name="poll_values" id="poll_values" value="dog" />Dog
<input type="radio" name="poll_values" id="poll_values" value="cat" />Cat
<input type="radio" name="poll_values" id="poll_values" value="horse" />Horse</br>
<input name="submit" type="submit" id="submit" value="Vote" />
</form>
</div>
<div id="poll_answers">
<h2>Sample answers</h2>
<p>Dog: 2</p>
<p>Cat: 2</p>
<p>Horse: 2</p>
</div>
</div>
</body>
</html>
-
1
