CODEWITHSUNDEEP
phpmysqlforms
Bill Flippen
Bill Flippen

Reputation: 453

Second drop down list based off of first drop down list using one php file

OK I did my first successful SQL query that generated a drop down box in PHP! (yes I am still a big noob)

So my next question....

If I hit the select button, must I create a new page or can I have a 2nd drop down box be generated on the same page based upon the the submission of first list?

I saw this: response to similar question

But I am still unsure of form action and method.Keep it Self? Do I need/should I use 2 separate forms? (I am not ready to tackle AJAX and far from ready to tackle Java so please keep those options off the table :) ) Or should I just pass on to a second file.

if it can be done can you explain the form action and method used in each form?

Upvotes: 2

Views: 852

Answers (2)

JoLoCo
JoLoCo

Reputation: 1375

If you're not ready for AJAX or Javascript then you'll need to add a second PHP page which will process the user's selection from the first drop-down box and display the appropriate second drop-down.

If you're new to all this then I'd advise you to keep it simple to begin with! Submitting a form and displaying a new page is the most basic way.

So in your first page's HTML you'll need...

<form action="second_page.php" method="post">
<select name="selection"> ... your drop-down code goes here ... </select>
<button type="submit">Next</button>
</form>

Then in second_page.php you'll need...

$selection = $_POST['selection']; // The variable $selection holds the user's selection

You can then output a second page based on the value of $selection.

Upvotes: 1

Satya
Satya

Reputation: 8881

I will prefer doing it via Ajax and JQuery, something like this : 

function getClassList(elem)
{
    var contentRequests, contentarr;  // The variable that makes Ajax possible!
    try
    {
// Opera 8.0+, Firefox, Safari
        contentRequests = new XMLHttpRequest();
    } 
    catch (e)
    {
// Internet Explorer Browsers
        try
        {
            contentRequests = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            try
            {
                contentRequests = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e)
            {
// Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
// Create a function that will receive data sent from the server
        contentRequests.onreadystatechange = function()
        {
            if(contentRequests.readyState == 4&& contentRequests.status==200)
            {


                document.getElementById(elem).innerHTML = contentRequests.responseText;

            }
        }

        var urltofetch="index.php?methodname=getclasses"

        contentRequests.open("GET", urltofetch, true);
        contentRequests.send(null);


}


function getStudentList(classelem,elem)
{

   var classToFetch =  classelem + " option:selected";

   var contentRequests, contentarr;  // The variable that makes Ajax possible!
    try
    {
// Opera 8.0+, Firefox, Safari
        contentRequests = new XMLHttpRequest();
    } 
    catch (e)
    {
// Internet Explorer Browsers
        try
        {
            contentRequests = new ActiveXObject("Msxml2.XMLHTTP");
        } 
        catch (e) 
        {
            try
            {
                contentRequests = new ActiveXObject("Microsoft.XMLHTTP");
            } 
            catch (e)
            {
// Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
// Create a function that will receive data sent from the server
        contentRequests.onreadystatechange = function()
        {
            if(contentRequests.readyState == 4&& contentRequests.status==200)
            {


                document.getElementById(elem).innerHTML = contentRequests.responseText;

            }
        }
        var classname = $(classToFetch).text();
        alert(classname);
        var urltofetch="index.php?methodname=getstudents&cname="+classname

        contentRequests.open("GET", urltofetch, true);
        contentRequests.send(null);

}

Upvotes: 1

Related Questions