Help with not displaying other subcategories

In the php web video script that I’m using, in the Upload Form, a User can choose which category to upload to. The Form also has a sub-category field to choose from. (Admin sets the subcategories, under a category).

Upon testing (after adding a subcategory called “trees” under Category A) on the Upload Form I see Category A and have two choices for subcategories “None” and “trees”.

But If I change my mind and decide, while the Upload Form is open, to upload to Category B, I still see the choices “None” and “trees”, even though “trees” is not a subcategory set for Category B (although if you choose Category B and trees, trees will not actually appear in the search results under Category B - so it proceeds successfully). But I believe this will cause confusion for the User/uploader.

I am looking for suggestions as to how to fix this, so as to not show another Categories’ subcategories as choices, in the subcategory field, of the Upload Form.

Here is some code from the main Upload Form html file:

<div class="form-group">
		<label class="col-md-12" for="category_id">{{LANG category}}</label>  
		<div class="col-md-12">
		<select name="category_id" id="category_id" class="form-control">
		<?php foreach($pt->categories as $key => $category) {?>
		<option value="<?php echo $key?>"><?php echo $category?></option>
		<?php } ?>
		</select>
		</div>
		</div>
		<div class="form-group">
		<label class="col-md-12" for="sub_category_id">{{LANG sub_category}}</label>
		<div class="col-md-12">
		<select name="sub_category_id" id="sub_category_id" class="form-control">
		<?php echo $pt->sub_categories_array["'1'"]; ?>
		</select>
		</div>
		</div>

and

<script>
$('.selectpicker').selectpicker({});
<?php 
$js_array = json_encode($pt->sub_categories_array);
echo "var sub_categories_array = ". $js_array . ";\n";
?>
$(document).on('change', '#category_id', function(event) {
	event.preventDefault();
	id = $(this).val();
	$('#sub_category_id').html(sub_categories_array["'"+id+"'"]);
});

Any guidance will be appreciated.

Do you want JavaScript to know about all of the subcategories, or would it be better for JavaScript to ask a PHP script (using an ajax request) for a new set of subcategories?

Thanks for your message. I don’t know what would be better. What do you suggest would be best?

I recommend the former, as that helps you to get started. You can always expand to the latter if things grow to become unwieldy. An example of unwieldy is if you had a country/region/city selection - you wouldn’t want all of the cities of the world to be loaded by the page each and every time.

Thanks for your reply, now that you explained that a little more, it’d be better for JavaScript to ask a PHP script (using an ajax request) for a new set of subcategories. Can you provide me with an example of that?

Sure thing. You can start off by using an object with option values as properties. That way it can act as a cache, so you don’t have to hit the server again to download what you’ve already previously downloaded.

// categories are meat, fruit, veges
var subcategories = [
  meat: undefined,
  fruit: undefined,
  veges: undefined
];

I’ve spelled them out for clarity, but they don’t even need to exist in the subcategories object.

You can then check if the subcategory already exists, and if it does you can send that information to an updateSubcategory function that removes the old options, and creates the new ones.

If the subcategory doesn’t have info, you can make an ajax call for that info and when the info is successfully received, send that info on to the updateSubcategory function.

Much thanks for that.
However, it’s a little over my skill level.
Any additional guidance is appreciated.

We can do it a bit at a time. I don’t plan to write the code for you, but to instead help you with any troubles that you come across along the way.

Thanks again for your reply.

So, something like this?

<script>
$('.selectpicker').selectpicker({});
<?php 
$js_array = json_encode($pt->sub_categories_array);
echo "var sub_categories_array = ". $js_array . ";\n";
?>
$(document).on('change', '#category_id', function(event) {
	event.preventDefault();
	id = $(this).val();
	$('#sub_category_id').html(sub_categories_array["'"+id+"'"]);
});
var subcategories = [
  meat: undefined,
  fruit: undefined,
  veges: undefined
];

I look forward to any additional guidance

What do you want to work on first? The ajax request or updating the subcategories?

Thanks for your reply.

ajax request

Okay, well for that you are first going to need a separate PHP file that accepts a subcategory, and outputs the appropriate subcategories in json notation.

Thanks for your reply.
How about this (towards the bottom starting at line 53)

<?php 
if (IS_LOGGED == false || $pt->config->upload_system != 'on') {
	header("Location: " . PT_Link('login'));
	exit();
}
$content         = 'content';

if($pt->config->ffmpeg_system == 'on'){
	$content     = 'ffmpeg';
}
if (!PT_IsAdmin()) {
	if ($pt->user->user_upload_limit != '0') {
		if ($pt->user->user_upload_limit != 'unlimited') {
			if ($pt->user->uploads >= $pt->user->user_upload_limit) {
				$content = "reached_limit";
			}
		}
	}
	else{
		if ($pt->config->upload_system_type == '0') {
			if ($pt->config->max_upload_all_users != '0' && $pt->user->uploads >= $pt->config->max_upload_all_users) {
				$pt->max_upload_users_ = $pt->config->max_upload_all_users;
				$content = "reached_limit_all";
			}
		}
		elseif ($pt->config->upload_system_type == '1') {
			if ($pt->user->is_pro == '0' && $pt->user->uploads >= $pt->config->max_upload_free_users && $pt->config->max_upload_free_users != 0) {
				$pt->max_upload_users_ = $pt->config->max_upload_free_users;
				$content = "reached_limit_all";
			}
			elseif ($pt->user->is_pro > '0' && $pt->user->uploads >= $pt->config->max_upload_pro_users && $pt->config->max_upload_pro_users != 0) {
				$pt->max_upload_users_ = $pt->config->max_upload_pro_users;
				$content = "reached_limit_all";
			}
		}
	}
}

// $max_videos_upload_limit_user_upload = $pt->config->videos_upload_limit;
// if ($max_videos_upload_limit_user_upload > 0 && $pt->config->go_pro != "on") {
// 	$count_user_videos = $db->where('user_id', $user->id)->where('video_location', '', '<>')->getValue(T_VIDEOS, 'COUNT(*)');
// 	if ($count_user_videos > $max_videos_upload_limit_user_upload) {
// 		$content = "reached_limit";
// 	}
// }

// $max_user_upload = $pt->config->user_max_upload;
// if ($pt->user->is_pro != 1 && $pt->config->go_pro == "on") {
// 	if ($pt->user->uploads >= $max_user_upload) {
// 		$content = "buy_pro";
// 	}
// }
$pt->sub_categories_array = array();
foreach ($pt->sub_categories as $cat_key => $subs) {
	$pt->sub_categories_array["'".$cat_key."'"] = '<option value="0">'.$lang->none.'</option>';
	foreach ($subs as $sub_key => $sub_value) {
		$pt->sub_categories_array["'".$cat_key."'"] .= '<option value="'.array_keys($sub_value)[0].'">'.$sub_value[array_keys($sub_value)[0]].'</option>';
	}
}



$payment_currency = $pt->config->payment_currency;
$currency         = "";
if ($payment_currency == "USD") {
	$currency     = "$";
}
else if($payment_currency == "EUR"){
	$currency     = "€";
}
$pt->page_url_ = $pt->config->site_url.'/upload-video';
$pt->page        = 'upload-video';
$pt->title       = $lang->upload . ' | ' . $pt->config->title;
$pt->description = $pt->config->description;
$pt->keyword     = $pt->config->keyword;
$pt->content     = PT_LoadPage("upload-video/$content",array('CURRENCY'   => $currency));

Normally it’s best to not use html with ajax requests, because too many things can go wrong when translating and moving that code from one place to another.

JSON notation is what’s best to be used for ajax requests.

Thank you for your reply.
I am not versed in JSON, so I’m not sure where I go from here for help with this modification

You used it in the very first post.

Thanks again.
Yes, this is not code written by me.
I don’t know where to go from here

This is where to go from here.

Thanks for all of your replies.
I hate to show my lack of coding knowledge, but I am wondering if the fix here can’t be something along the lines of just, when using the Upload Form, if Category A is selected, only display Category A subcategories in the subcategory field (if any) otherwise show 'none".
If Category B is selected, only display Category B subcategories in the subcategory field (if any) otherwise show 'none".
if Category C is selected, only display Category C subcategories in the subcategory field (if any) otherwise show 'none".

Right now it seems to just show all subcategories or “None”.

I look forward to any additional comments/help

Yes, that is achieved by first removing all of the subcategory options, then one of two things occur.
If the subcategories are already known then you can just generate a new set of options.
Otherwise, use an ajax request to fetch the subcategories, add them to the subcategories that are all ready known, and then generate a new set of options.

As the subcategories won’t be known to begin with, the ajax request for subcategories is the first and main thing to work on.

When a category is selected, that category name is sent as an ajax request to a getsubcategories.php script, which could look like:
getsubcategories.php?category=fruit

which gives a text output in json notation of the appropriate subcategories. That is the important part to work on first.

You can then add those subcategories to the javascript array, and use them to build the appropriate subcategory options.