Need help with controlling a page dynamically - php

Question

I'm looking to make a page wherein a user will make a selection for eg: "How old is your computer?" - "One year", "Two years" etc etc and the page will remove and add 'options' (which at the moment only need to be informative sections of text)
Is there any way to do something like that?
The technologies I'm using are PHP and of course, HTML and CSS to style the pages.
Thanks in advance!

Answer 1

PHP cannot detect if changes has been made to the page, you will have to use Javascript for that.
If you are using a HTML select element and you want to create the content dynamically it could look something like this:
HTML
<select id="computerAge">
<option>2 years</option>
<option>3 years</option>
</select>
<div id="dynamicContent">
</div>
Javascript
var computerAge = document.getElementById('computerAge');
var dynamicContent = document.getElementById('dynamicContent');
computerAge.onchange = function()
{
// Get a list of the current dynamic content
var contents = document.getElementById('content').document.getElementsByTagname('p');
// Remove current dynamic content
for(i = 0; i < contents.length; i++)
{
dynamicContent.removeChild(contents[i]);
}
// Create new dynamic content
var dynamicP = document.createElement('p');
if(computerAge.value == '2 years')
{
dynamicP.innerHTML = 'Content for 2 year old computer';
dynamicContent.appendChild(dynamicP);
}
elseif(computerAge.value == '3 years')
{
dynamicP.innerHTML = 'Content for 3 year old computer';
dyanmicContent.appendChild(dynamicP);
}
}
Or if you're not creating elements dynamically:
HTML
<select id="computerAge">
<option>2_years</option>
<option>3_years</option>
</select>
<div id="content">
<div id="2_years" style="display: none">
<p>Content for 2 year old computer</p>
</div>
<div id="3_years" style="display: none">
<p>Content for 3 year old computer</p>
</div>
</div>
Javascript
function init()
{
// Get the select element
var select = document.getElementById('computerAge');
select.onchange = function()
{
// Get the elements which could be the dynamic content
var content = document.getElementById('content')
var contents = content.getElementsByTagName('div');
// Iterate over contents; make selected visible and hide others
for(i = 0; i < contents.length; i++)
{
if(contents[i].id == select.value)
{
contents[i].style.display = 'block';
}
else
{
contents[i].style.display = 'none';
}
}
}
}
window.onload = init;

Answer 2

I think you're mixing some stuff together. From what I understand is you want to show or hide portions of the page depending on what the user selected in a dropdown.
PHP makes "dynamic webpages" that's true. But what's ment by this is that the page can serve different content on each request. But once the content is served it's rendered on the client side and not in PHP hands anymore.
If you want to change the content without reloading the whole page you should use javascript.
You could also server new content using ajax, but I think you just want to put some div's display propertie to none or something like that.