Is there anyway i could dynamically fetch the value of an <option> and pass it to PHP without using AJAX?

I have two <select> one is category and the second is subcategory.

here is the first <select> for category.

<select name="category" size="10">
    <?php foreach($categories->fetch(array('table' => 'categories')) as $category) { ?>
        <option value="<?php echo $category['id']; ?>"><?php echo $category['name']; ?></option>
    <?php } ?>
</select>

now the second <select> i.e subcategory should be hidden initially and when a user click on category <select> based on the value it should populate the value in subcategory.

One way of doing this is via AJAX by passing categoryId as POST Request and getting HTML as response.

however i would like to know if there is any other alternative so that it automatically pass the categoryId value to PHP and unhide the second <select> here is the code of second <sel开发者_Python百科ect>

<select name="subcategory" size="10">
    <?php foreach($categories->fetch(array('table' => 'subCategories', 'categoryId' => $categoryId)) as $subCategory) { ?>
        <option value="1"><?php echo $subCategory['name']; ?></option>
    <?php } ?>
</select>

the only thing i need here is $categoryId to be populated dynamically. is there any way of doing this?

thank you..

No, there is no way to do what you are suggesting. PHP is only run on the server, so by the time the page is rendered on the client the PHP has already been run.

Your best bet would be what you already suggested, running some AJAX after the first select is changed, sending back the category ID to the server and retrieving what you need to build the second select.

Is there a reason why you don't want to do it this way?

Sukumar has probably suggested the best and most intuitive solution to make it appear as if the data is being loaded dynamically to the user.

The other alternative would be to submit the form when the select box is changed. Once the form has been submitted PHP would pick up the ID from the POST array and then re-populate the sub-category select box. This is often used as a fallback in case the user doesn't have JavaScript enabled.

Structurally, there are three choices to solve this problem:

1. Use an ajax call to fetch the required data when a user selection is made as jbruno has described.
2. Submit the whole page to the server, let your PHP see the newly selected option and fill in the newly desired data in a returned page. This will cause the page to refresh so is less ideal than option 1.
3. Pre-populate the page with all possible data in a javascript data structure so you can use Javascript to just look up the desired category ID in a local data structure, modify the page and never have to talk to the server in order to update the page.

In my opinion, option 3) is the most desirable if the data set required for local lookup is not too large (say under 100k) and it's not too expensive on the server to collect all that data for inclusion in the original page and if the data doesn't change real-time or having data as of the page load time is OK.

If option 3) isn't feasible for any reason, then option 1) is next best. Option 2) is not as good a user experience so it should only be the last resort if you really can't implement options 1) or 3).

You asked more specifically about option 3. I don't really yet understand what the whole data you need looks like. If you really only have four total data types residential_plot, residential_apartment, office_space and showroom, then you can just make those be four keys on an object and store their data that way:

var data = {
    "residential_plot": 1,
    "residential_apartment": 2,
    "office_space": 3,
    "showroom": 4
};

The 1, 2, 3 and 4 are just whatever data you want to store for that type. It can be numbers, strings, arrays of data, other objects of data, anything.

To access this, you would do like this:

var id = data.residential_plot;

or

var index = "residential_plot";
var id = data[index];

If you wanted to store the notion of categories and sub-categories, you would need an extra level of objects:

var data = {
    "residential": {"residential_plot": 1, "residential_apartment": 2}, 
    "commercial": {"office_space": 3, "showroom": 4}
};

Then, you would access it like this:

var id = data.residential.residential_plot;

or like this:

var category = "residential";
var catType = "residential_plot";
var id = data[category][catType];