This is largely a job Javascript could do (if you know everything ahead of time) or PHP will be needed if you don’t know everything until you click. Am going to give you guidelines regarding the first scenario (the second scenario (sort of) only differs in the sense that PHP would do what is “hard-coded” in the discussion below, adding its intelligence along the way … ie. know that PHP can write its own Javascript … very powerful duo!).
Example 1 of 2:
You have some PHP which produces HTML like below:
<a href="#" id='mya' onclick='populatep();'>My Link Makes Things Appear Below ...</a>
<p id='myp' style='display:none;'></p>
... the new Javascript you will need ( put within <head> and </head> ) would look like:
<script type="text/javascript">
function populatep() {
var myst = document.getElementById( "myp" );
myst.innerHTML = myst.innerHTML + "My paragraph appears!";
myst.style.display = "block";
}
</script>
Example 2 of 2:
You have some PHP which produces HTML like below:
<a href="#" id='mya' onclick='populateselect();'>My Link Makes Things Appear Below ...</a>
<select id='myselect' style='display:none;'></select>
... the new Javascript you will need ( put within <head> and </head> ) would look like:
<script type="text/javascript">
function populateselect() {
var myst = document.getElementById( "myselect");
myst.innerHTML = myst.innerHTML + "<option value='" + "val1" + "'>Value 1</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val2" + "'>Value 2</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val3" + "'>Value 3</option>";
myst.innerHTML = myst.innerHTML + "<option value='" + "val4" + "'>Value 4</option>";
myst.style.display = "block";
}
</script>
Appendix 1 of 2 (PHP writing Javascript) ... :
<?php
echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
?>
Appendix 2 of 2 (PHP writing Javascript) ... differentiating:
<?php
if (strpos($_SERVER['QUERY_STRING'], "#") !== false) {
echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears on the second pass!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
} else {
echo '<html>' . "n";
echo '<head>' . "n";
echo '<script type="text/javascript">' . "n";
echo ' function populatep() {' . "n";
echo ' var myst = document.getElementById( "myp" );' . "n";
echo ' myst.innerHTML = myst.innerHTML + "My paragraph appears!";' . "n";
echo ' myst.style.display = "block";' . "n";
echo ' }' . "n";
echo '</script>' . "n";
echo '</head>' . "n";
echo '<body>' . "n";
echo '</body>' . "n";
echo '</html>' . "n";
}
?>
Did you know …
JavaScript makes a great easy-access Calculator?
Try typing the lines below into the address bar of your favourite browser:
Javascript: eval(512 / 380);
Javascript: eval(512 * 380);
Javascript: eval(512 – 380);
Javascript: eval(512 + 380);
Javascript: eval(512 % 380);
These days we spend so much time on the Internet it is a much quicker way to get to a calculator!
If this was interesting you may be interested in this too.
4 Responses to PHP/Javascript what a duo!