Naming a 'Channel' instead of "Selecting a Channel", so the sub-categories appear

[Chrisj]

In a php video-web-script I'm using, in the (video)Upload Form I tried hiding the select-a-channel drop-down choices, essentially like this:

<li><input type="hidden" name="channel" value="1"/></li>

(so, that the Channel is pre-determined for the uploader/user).
But, when the Channel is hidden like that, the next field box(sub-categories) in the Form, shows no choices. Apparently, in this Upload Form a Channel choice is required in order to see the sub-category choices.

So, I'm trying to figure out a way to name the channel, and somehow let the Form know that Channel has been chosen, so that the sub-category drop-down choices are available for choosing, and proceeding.
Here's the code without the hidden Channel:

<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);">
 [var.fields_all;htmlconv=no]</select> ([var.lang_select_one])</li>

<li style="width:240px; text-align:right"> </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]: </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> ([var.lang_optional])</li>

Someone who looked at the files had this to say (it's a bit over my head):

 

"the javascript executes uploader.php?sub_cat=1.  

The uploader.php returns the list of subcategories in html 

and the ahah script moves it to the correct section on the inner_uploader.htm

Move the javascript off the onchange to just do it anyway and pass the channel value of 1 directly into uploader.  

I just think maybe the javascript isn't being executed for whatever reason"

 

Here's that javascript file:

 

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

// @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(/ /,"OK 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( " " );



		while (intIndexOfExtraSpace != -1)

		{

			ajax_space_fix = ajax_space_fix.replace( " ", " " )

			intIndexOfExtraSpace = ajax_space_fix.indexOf( " " );

		}



		//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 ideas regarding naming the channel, and let the Form know that Channel has been chosen, so that the sub-category drop-down choices are available for choosing" will be greatly appreciated.

 

 

 

 

 

[mac_gyver]

Move the javascript off the onchange to just do it anyway and pass the channel value of 1 directly into uploader. 

 

 

right after the line where you are replacing the <select>.....</select> option menu with the hidden form field, add the following - 

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

[Chrisj]

Thanks for that suggestion.

I tried this:

<input type="hidden" name="channel" value="1"/><script> javascript:ahahscript.ahah('[var.base_url]/uploader.php?sub_cat=1', 'sub_change', '', 'GET', '', this); </script>

as per your instructions, but unfortunately no success.

Any other ideas will be welcomed.

[mac_gyver]

actually, i'm wondering if the <script>....</script> can be inside the form. you can move it to after the </form> tag to see.

 

in any case, just telling us that something was not successful is not helpful. what did it do and when you debugged the problem in the browser developer tools/console and in the client side code, what did you find it WAS doing or not doing correctly?

[Chrisj]

Thanks for your reply and remedy. Much thanks.

Putting this:

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

 outside of the Form, worked! Much, much thanks/appreciated.

 

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 where I can make that happen, I'd welcome that guidance. Much, much thanks again.

[cyberRobot]

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 where I can make that happen, I'd welcome that guidance. Much, much thanks again.

 

Have you tried adding another <option> tag right after the open <select> tag? The value attribute would be set to blank.

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

[Chrisj]

Thanks so much for your reply.

 

Yes I tried that suggestion by trying it several places within the <select tags on this line, without success:

<li style="width:240px; text-align:right"><strong>[var.lang_sub_cat]: </strong><option value="">Choose One</option></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> ([var.lang_optional])</li>

Any other ideas will be greatly appreciated. Much thanks again.

[cyberRobot]

I should mention that I've never used the TinyButStrong template engine. So I'm just guessing here. But have you tried adding the <option> tag to the following 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);"> [var.fields_all;htmlconv=no]</select> ([var.lang_select_one])</li>

[Chrisj]

Thanks for your reply, however, that line has been commented out, and replaced with the "hidden" line, as appears in my original posting.

Any other suggestions will be appreciated.