Help with hiding 'channel', but not 'category' in Upload Form

This web script’s Upload Form allows the user/uploader to choose ‘channel’ and ‘sub-category’ to upload to. I tried hiding the channel like so:

<li style="width:400px; text-align:left;">
<input type="hidden" name="channel" value="1"/></li>

so that the channel is essentially pre-chosen, which works successfully on it’s own, but there is no drop-down choices for sub categories showing.

But, if I revert back to the Form script that doesn’t hide the channel, and makes you choose a channel, then the sub-categories will show. Here’s that code:

<li style="width:240px; text-align:right;"><strong>[var.lang_select_channel]:</strong></li>
<li style="width:400px; text-align:left;">
<select class="upload-video-form-input" style="width:160px;" size="1" name="channel" onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);">
&nbsp;[var.fields_all;htmlconv=no]</select>&nbsp;([var.lang_select_one])</li>

<li style="width:240px; text-align:right">&nbsp;</li>
<li style="width:380px" class="font5_14"><strong>[var.lang_sub_categories]</strong></li>

<li style="width:240px; text-align:right"><strong>[var.lang_sub_cat]:&nbsp;</strong></li>
<li style="width:400px; text-align:left;" id="sub_change"><select class="upload-video-form-input" style="width:160px;" size="1" name="sub_cat"></select>&nbsp;([var.lang_optional])</li>

I’m wondering if there is a way/tweak to hide the channel, AND allow the sub-categories to be shown. Any ideas/help will be appreciated.

Do you have problem solving skills of your own?

@oddz sites like this exist so people can find help with their code. That said, @ChrisjChrisj, it appears your second <select> tag does not have any options actually within it. Perhaps try putting some option for the user to select in your tags.

1 Like

My guess is that the javascript code that runs when you change the value of channel in the original code then populates the sub-categories list. This line:

<select class="upload-video-form-input" style="width:160px;" size="1" 
name="channel" onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php
?sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);">
&nbsp;[var.fields_all;htmlconv=no]</select>&nbsp;([var.lang_select_one])</li>

And because you don’t call it any more, then the sub-category drop-down is never filled in.

Thanks for your message.
Yes, I believe you are absolutely correct “because you don’t call it any more, then the sub-category drop-down is never filled in”. Is there a way to “call it” in a hidden way?

I don’t know, you’d have to either look at the JavaScript function and split out the section that populates the option values once it knows what the value of channel is, or have the code that generates the page do it.

1 Like

Sure

However, the op is posting one or two questions a day based on the same project. I think that is a little excessive. The op isn’t going to learn anything if people are constantly hand holding them.

I also don’t know whether this a paid project or not but many of the questions being asked have fairly easy solutions. Solutions which *most professionals should be able to problem solve on their own.

Can you help me determine “the section that populates the option values”?

I believe this is the ahah.js file in this script:

// ==========================================================================

// @function		Complete AHAH function

// @author		Daniele Florio

// @site		www.gizax.it

// @version		1.1.3 experimental



// @thanksTo		Andrea Paiola,Walter Wlodarski,Scott Chapman



// @updated 1.1.3 ( execJS function ) @thanks to Giovanni Zona



// (c) 2006 Daniele Florio <daniele@gizax.it>



// ==========================================================================



/* USAGE:



1) Posting data to form:

<form id="myform" action="javascript:ahahscript.likeSubmit('helloworld.php', 'post', 'myform', 'mytarget');">



									    ('comments_ajax.php', 'commentajax', '', 'GET', '', this)

2) Getting simple url



<a href="#" onclick="javascript:ahahscript.ahah('test.htm', 'mytaget', '', 'GET', '', this);">click me</a>



*/



var ahahscript = {



	//loading : 'loading...',

	loading : "<br /><img src=javascripts/loading.gif",



	ahah : function (url, target, delay, method, parameters) {



	  if ( ( method == undefined ) || ( method == "GET" ) || ( method == "get" ) ){



			this.creaDIV(target, this.loading);



			if (window.XMLHttpRequest) {

				req = new XMLHttpRequest();

			}

			else if (window.ActiveXObject) {

				req = new ActiveXObject("Microsoft.XMLHTTP");

			}

			if (req) {

				req.onreadystatechange = function() {

					ahahscript.ahahDone(url, target, delay, method, parameters);

				};

				req.open(method, url, true);

				req.send("");

			}

		}

		if ( (method == "POST") || (method == "post") ){



			this.creaDIV(target, this.loading);



			if (window.XMLHttpRequest) {

				req = new XMLHttpRequest();

			}

			else if (window.ActiveXObject) {

				req = new ActiveXObject("Microsoft.XMLHTTP");

			}

			if (req) {

				req.onreadystatechange = function() {

					ahahscript.ahahDone(url, target, delay, method, parameters);

				};

				req.open(method, url, true);

				req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

				req.send(parameters);

			 }

		}

	},



	creaDIV : function (target, html){

		if (document.body.innerHTML) {

			document.getElementById(target).innerHTML = html;

	   	}

	   	else if (document.getElementById){

			var element = document.getElementById(target);

			var range = document.createRange();

			range.selectNodeContents(element);

			range.deleteContents();

			element.appendChild(range.createContextualFragment(html));

	   }

	},



	execJS : function (node) {



		var st = node.getElementsByTagName('SCRIPT');

		var strExec;



		var bSaf = (navigator.userAgent.indexOf('Safari') != -1);

		var bOpera = (navigator.userAgent.indexOf('Opera') != -1);

		var bMoz = (navigator.appName == 'Netscape');



		for(var i=0;i<st.length; i++) {

			if (bSaf) {

			  strExec = st[i].innerHTML;

			}

			else if (bOpera) {

			  strExec = st[i].text;

			}

			else if (bMoz) {

			  strExec = st[i].textContent;

			}

			else {

			  strExec = st[i].text;

			}

			try {

			  eval(strExec);

			} catch(e) {

			  alert(e);

			}

		}



	},



	ahahDone : function (url, target, delay, method, parameters) {

		if (req.readyState == 4) {

			element = document.getElementById(target);

			if (req.status == 200) {



				//this.creaDIV(target, req.responseText);

				output = req.responseText;

				document.getElementById(target).innerHTML = output;

				var j = document.createElement("div");

				j.innerHTML = "_" + output + "_";

				this.execJS(j);



			}

			else {

				this.creaDIV(target, "ahah error:\n"+req.statusText);

			}

		}

	},



	/*



	@@ parameters :

	fileName	= name of your cgi or other

	method		= GET or POST, default is GET

	formName	= name of your form

	dynamicTarget	= name of your dynamic Target DIV or other



	@@ usage :





	*/



	likeSubmit : function ( file, method, formName, target ) {



		var the_form = document.getElementById(formName);

		var num = the_form.elements.length;

		var url = "";

		var radio_buttons = new Array();

		var nome_buttons = new Array();

		var check_buttons = new Array();

		var nome_buttons = new Array();





		// submit radio values

		var j = 0;

		var a = 0;

		for(var i=0; i<the_form.length; i++){

			var temp = the_form.elements[i].type;

			if ( (temp == "radio") && ( the_form.elements[i].checked) ) {

				nome_buttons[a] = the_form.elements[i].name;

				radio_buttons[j] = the_form.elements[i].value;

				j++;

				a++;

			}

		}

		for(var k = 0; k < radio_buttons.length; k++) {

			url += nome_buttons[k] + "=" + radio_buttons[k] + "&";

		}



		// submit checkbox values

		var j = 0;

		var a = 0;

		for(var i=0; i<the_form.length; i++){

			var temp = the_form.elements[i].type;

			if ( (temp == "checkbox") && ( the_form.elements[i].checked) ) {

				nome_buttons[a] = the_form.elements[i].name;

				check_buttons[j] = the_form.elements[i].value;

				j++;

				a++;

			}

		}

		for(var k = 0; k < check_buttons.length; k++) {

			url += nome_buttons[k] + "=" + check_buttons[k] + "&";

		}



		// submit all kind of input

		for (var i = 0; i < num; i++){



			var chiave = the_form.elements[i].name;

			var valore = the_form.elements[i].value;

			var tipo = the_form.elements[i].type;



			//var valore_2 = valore.replace(/&#160;/,"OK&nbsp;Space"));

			//alert(valore_2);



			if ( (tipo == "submit") || (tipo == "radio") || (tipo == "checkbox") ){}

			else {

				url += chiave + "=" + valore + "&";

			}

		}



		//alert(url);



		var ajax_space_fix = url;

		var intIndexOfExtraSpace = ajax_space_fix.indexOf( "&#160;" );



		while (intIndexOfExtraSpace != -1)

		{

			ajax_space_fix = ajax_space_fix.replace( "&#160;", " " )

			intIndexOfExtraSpace = ajax_space_fix.indexOf( "&#160;" );

		}



		//alert( ajax_space_fix );



		var parameters = ajax_space_fix; //url;



		url = file + "?" + url;



		if (method == undefined) {

			method = "GET";

		}

		if (method == "GET") {

			this.ahah(url, target, '', method, '');

		}

		else {

			this.ahah(file, target, '', method, parameters);

		}

	}



};

Any help will be appreciated.

That certainly is the JS code that it calls - you can see from the html code segment that it calls the ahah() function with a load of parameters, and in the JS code you can see that the ahah() function calls the ahahDone() function when it’s finished. What it seems to be doing is calling “uploader.php” and passing in the selected category value (which in your new code will be a fixed value) and a pointer to itself, then when it retrieves the list of categories from that php code, the ahahDone() function then populates the dropdown.

So you either need to replicate that call as part of your page loading function, or something else that executes when the page is loaded rather than when you choose a category, or you need to have whatever generates the page populate that drop-down from the start. If your html code is being generated by a php script, I think I’d be looking at modifying that to build the list while it’s doing everything else - it doesn’t make sense to me to draw the page, then call back to the server to fill a list. If your html page is not generated by a php script, then you’d need to call that same function on page load, passing in the list id rather than “this”.

I don’t know enough JS to say any more.

Thanks for the replies.
The solution was moving this line outside of the Form:

       <script> javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat=1', 'sub_change', '', 'GET', '', this); </script>

Now, I’m just trying to have “Choose One” appear, in the field box, instead of the first choice of the sub-category list. If you’d like to share any thoughts on how I can make that happen, I’d welcome that guidance.

I’ve tried adding:

 <option value="">Choose One</option>

to within the <select tag, in this line, for example, without success:

<li style="width:400px; text-align:left;" id="sub_change"><select class="upload-video-form-input" style="width:160px;" size="1" name="sub_cat"><option value="">Choose One</option></select></li>

JavaScript is going to ignore that javascript: label so there is no need to include it.

Almost all JavaScript belongs just before the </body> tag.

The reason your adding of “Choose One” in the select tag doesn’t work is because of these lines in your javascript function from above:

range.selectNodeContents(element);
range.deleteContents();
element.appendChild(range.createContextualFragment(html));

One of the first parts of the JS calls a function called creaDiv(), which contains the above code which selects the output element, deletes the content from it, then puts something else in there. So whatever was in your code to start with has now gone, before it even gets a response from the server.

The trouble is, because your JS code is intentionally quite generic and deals with several different types of requests for content, you have to be careful what you change so that it doesn’t cause a problem with other fields. It would be relatively easy to make it stick “Choose One” at the start of every bit of data it gets back from the server, but you don’t want to do that as it would affect any element that calls it. You also don’t want to hard-code in the JS to check for the target id and decide based on that. The proper way would be a flag to pass to the server code to tell it to add “Choose One” on the beginning of an option list if it’s set.

Thanks so much for taking the time to explain why “adding of “Choose One” in the select tag doesn’t work”. I greatly appreciate that and your suggestion for a solution. Could you please share an example of what you mean by “a flag to pass to the server code to tell it to add “Choose One” on the beginning of an option list if it’s set”? I look forward to any further clarification. Much thanks again.

Well, where your code calls this:

onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php
?sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);

you’d need to add a parameter to it:

onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php
?prepend=Y&sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);

where the additional parameter prepend tells your server code (uploader.php) whether to stick the extra option on the front of the option list. Then you’d have to change uploader.php to look at that parameter, and add the extra option if it’s set to Y, or true, or 1, or whatever you want.

Thanks so much for that suggestion/clarification, that makes sense, much appreciated.
I don’t suppose I could add “CHOOSE ONE” in the script and then like so:

onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php
?prepend=CHOOSE ONE&sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);

And then adding something like this:

if ( $sub_cat_choice == 'CHOOSE ONE' ) {

into this code from uploader.php:

<?php
include_once ('classes/config.php');
include_once ('classes/sessions.php');
include 'uploader_conlib.php';

$config['notification_error'] = $lang_error;

$page_title = $lang_upload_video;


if ($_SESSION['user_id'] == "") {
	header("Location: " . "$base_url/login.php");
	die();
}

$load_javascript	= 1;
$ahah			= 1;
$thickbox = 1;

//get channel data, create "select" form fields to load into form
$sql			= "SELECT channel_id, channel_name FROM channels";
$result1 		= @mysql_query($sql);
$count_cats 	= @mysql_num_rows($result1);
$fields_all 	= '';
$sub_fields_all	= '';
$show_fields	= '';

$fields_all .= '<option value="99999">Select One</option>';

while ($result = @mysql_fetch_array($result1)) {
    	$fields_all .= '<option value="'.$result['channel_id'].'">'.$result['channel_name'].'</option>';
}

$sub_cat_choice = (int) mysql_real_escape_string( $_GET['sub_cat'] );

if ( $sub_cat_choice ) {

if ( $sub_cat_choice == '99999' ) {

$sub_fields_all  .= '<select class="image_form" style="width:160px;" size="1" name="sub_cat">';
$sub_fields_all  .= '<option value="99999">'.$lang_no_sub_categories.'</option>';
$sub_fields_all .= '</select>&nbsp;('.$lang_select.')';
echo $sub_fields_all;
die();

} else {

$sql2			= "SELECT * from sub_channels WHERE parent_channel_id = $sub_cat_choice";
$query		= @mysql_query($sql2);
$sub_fields_all  .= '<select class="image_form" style="width:160px;" size="1" name="sub_cat">';

while ($result2 = @mysql_fetch_array($query)) {
$count_subs		= @mysql_num_rows($query);
$sub_fields_all  .= '<option value="'.$result2['sub_channel_id'].'">'.$result2['sub_channel_name'].'</option>';
}

if ( $count_subs == '' ) {
$sub_fields_all  .= '<option value="99999">'.$lang_no_sub_categories.'</option>';
}

$sub_fields_all .= '</select>&nbsp;('.$lang_select.')';

echo $sub_fields_all;
die();
}
}

// grab values from form if any
$form_submitted		= $_POST['form_submitted'];
$title 			= $_POST['title'];
$description 		= $_POST['description'];
$tags 			= $_POST['tags'];
$thumbnail    = $_POST['thumbnail'];
$new    = $_POST['new'];
$location_recorded	= $_POST['location_recorded'];
$allow_comments 		= $_POST['allow_comments'];
$allow_embedding 		= $_POST['allow_embedding'];
$public_private 		= $_POST['public_private'];
$channel 			= $_POST['channel'];
$sub_cat			= $_POST['sub_cat'];
$procede 			= true;

Honestly (and obviously), I don’t know how to prepend and get uploader.php to “look at that parameter”. Any help will be welcomed. Much thanks

If you have a look at the code you posted, you will be able to see how, when it is displaying the channel list, it starts off with a first option value of “Select One”. So all you need to do is add some code to look at the value of $_GET['prepend'] (which is the parameter you pass in the URL) and decide whether to do that for the sub_cat list, which is in $sub_fields_all by the look of it.

You could use the text “Choose One” in the link, and use that as a way of deciding exactly what text to put into the first option. So your code could check to see whether $_GET['prepend'] is blank, in which case no first field is added, or if there’s something in it, use that value for the first option text. Remember though, it’s a URL so you have to encode any special characters like spaces:

onchange="javascript:ahahscript.ahah('[var.base_url]/uploader.php
?prepend=CHOOSE%20ONE&sub_cat='+ document.form_upload.channel.value, 'sub_change', '', 'GET', '', this);

So I’ve used %20 instead of a space, have a read up on URL encoding for more detail.

Have a stab at adding the code and post what you’ve done for more assistance. I’m happy to try to steer you in the right direction, but not just do it for you.

Thanks again for your help.
I added this and it appears to work:

$sub_fields_all  .= '<option value="" disabled selected hidden>'. $_GET['prepend'] . '</option>';

Much thanks again

I’m glad it worked for you. I would suggest you surround that statement with a check to see whether $_GET['prepend'] exists, and is non-null, and some kind of valid value (if that’s possible in this context), if you haven’t already. You can then choose whether to add the first option or not, but you should validate any value before you use it.

Thanks again for all of your feedback. Much appreciated.
However, I’m not clear on what you’re suggesting. Can you give me an example?

Well, stuff like this

if (isset($_GET['prepend'])) { 
  if ($_GET['prepend'] != "") { 
    // and maybe some other validity checks
    $sub_fields_all  .= '<option value="" disabled selected hidden>'. $_GET['prepend'] . '</option>';
    }
  }

That way, if you don’t want to add the “Choose One” option, you just don’t need to specify the extra parameter on the URL. If you don’t check for it existing, you’ll get the option but with no text, which will look strange.