Need help with controlling a page dynamically

Question

Hey guys!

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

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.

Answer 2

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;