Easy to use File Picker ?

[armasmike]

I am trying to make a easy to use file picker.

Right now i have a drop down with 20+ files. Thats to much i want the user to pick the file using raido buttons.

All the use need to do is pick the color and effect.

All the files will be name like this

red_grow_in.xxx
blue_grow_out.xxx
red_grow_left.xxx

So on and so on there will be a lot of files but all the user needs is to pick color and effect.

This is all done in a fourm i have set up right now.

as the user pick what they want the files name is put in an input box.

How do i go about doing this?

[jscheuer1]

Whats a fourm? Do you mean a form or a forum? What do you mean by an input box? Do you mean a text input element, a textarea element, or perhaps something else. As a filename is put into this element, does it replace any existing one, or is a list being compiled? Do you already have that set up? If so, are you using javascript for it? Something else?

Once all of this is done by the user (selecting file(s) and seeing them in the target element), then what happens?

[armasmike]

I mean form and yes a text input element it just replace the existing one.

I already have a from made but it is using a drop down boxs that list all the files in a dir.

this is my code for the drop down box i am using now.

<select id="flashfile" name="flashfile" style='font-family: Arial; font-size: 8pt; width: 250px;'>
<option value="NONE" style='color: #999999;'>Default File</option>
<?
$directory = $_SESSION['docroot_path']."/sohoadmin/plugins/Flash-MA_SuperBasic/main/";
$handle = opendir($directory);
$imagefile_options = "";
while ( $files = readdir($handle) ) {
if ( strlen($files) > 2 && (eregi("\.swf", $files)) ) {
if ($tmp == "#EFEFEF") { $tmp = "WHITE"; } else { $tmp = "#EFEFEF"; }
$imagefile_options .= " <option value=\"".$files."\" style=\"background: ".$tmp.";\">".$files."</options>\n";
}
}
closedir($handle);
echo $imagefile_options;
?>

This lets user pick what flash file to load. They have about 20 files to pick from and i keep adding more files for them.

I want to add a easy to use file picker based on two things. Color, effect. Both will be in the file name "red_fade_in.swf.

So i want the radio buttons for colors and effect and have the user pick red has color and fade in as the effect and it will put that file name in the "flashfile" var.

[jscheuer1]

So, let me get this straight. You currently use PHP to list all available .swf files in a directory as options in a select element. But now you want to have two or more sets of radio buttons that will simply determine parts of the filename based upon characteristics. Once all of these parts are assembled in the proper order and given the extension .swf, you want that filename to appear in a text input. If I have that about right, you can't do that using PHP without reloading the page at least once, perhaps several times. Javascript could work out well, and I would suggest a default value for any radio group (one button already checked), and therefore a default filename. But it will require javascript on the user's end. You could keep your current setup as a non-javascript fall back.

If I have that about right, you could have various button groups (a radio group is determined by a shared name):

Pick Color:<br>
<input type="radio" name="color" value="green" checked>Green<br>
<input type="radio" name="color" value="red">Red<br>
&nbsp;<br>Pick Fade:<br>
<input type="radio" name="fade" value="nofade" checked>No Fade<br>
<input type="radio" name="fade" value="fade">Fade<br>
&nbsp;<br>Current Choice:<br>
<input type="text" name="swf_file" value="green_nofade.swf" readonly>

When the form is submitted, the page that loads could read the value of the input named swf_file that's passed in the URL or as a POST value and load it. Sound good? If so, all we would have to do is add onclick events for the radio buttons and concatenate their values into the swf filename, and set that as the value of the swf_file input. And provide a mechanism for making the original (or some other) method available to non-javascript enabled users (if that's applicable - it won't be if the rest of the site is too heavily dependant upon javascript already). Before I go that/those extra step(s) (which would be fairly simple), I want to make sure this is what you are after. Is it?

[armasmike]

yes the site uses a lot of javascript and php so 100% of the user will have javascript on there computer.


There will ne no non-javascript users do i will not be adding that in the code.

The code i see looks just what i need a with the raido buttons.

How do i put it all to get there ones i see it i can add more to it.

The next will be font size raido buttons.

So the user picks the color, effect, and font size.

That will be put all together to make a file name with the.

red_fade_in_size10.swf

Put in to a text input box named "flashfile"

But it's all being pulled from this dir

$directory = $_SESSION['docroot_path']."/sohoadmin/plugins/Flash-MA_SuperBasic/main/";

and it needs this in it.



The $_SESSION['docroot_path'] pulls the domain name of the site it's running on. so the client code looks like

http://armasmike.com/sohoadmin/plugi...perBasic/main/

and the var "flashfile" goes at the end of this path.

[jscheuer1]

This really sounds like it can work. One question I have that I didn't ask in a straightforward manner is how you envision the form operating. I suggested using (more or less) the normal form submission process. How that could work is that once we get the filename into the text input, the user hits the submit button. Now the action of the form could be the page itself, or another page, and the value of the text input containing the filename will be sent via POST or GET (depending upon the method of the form) to the action page. As that page loads, it can be coded to write out the required tag(s) (via PHP) for the Flash object using that passed value. Is this how you were doing it only using the select element's value? Or were you using another method? If so, what method? Or, hadn't you gotten that far yet?

I'll have the bulk of (possibly all) the javascript code for reading the radio buttons to the text input element ready later tonight or by sometime tomorrow (my time - EDT). In the meantime, I'd like to know the answer to my above question, as it will help determine what we do with the value of the filename once we get it.

I favor a submission (as I've outlined), as Flash works best on a fresh page load.

[armasmike]

i am using a POST method of the form. if you want to know what i am doing then i will tell you.

I have made a template that uses php,html,css,javascript. Then i made a "plug-in" For this template that users can use to edit the templates css,php and javascript files using a html form. As users change var in the form it changes the key var in the css, php or javascript files.

This why evey part of the template can be change useing the "plug-in" So the user doesn't need to know code to make my templates the way they want.

So i sell my templates the user can do the customize it there way.


I have flash header in my template that the user can edit the text with out useing flash editor. And my next thing is for then to change the flash file using radio buttons to pick what kind of flash to load.

There is more to it but it's a sum of what i work on.

[jscheuer1]

You still haven't really answered my questions (that could be my fault for not asking specifically enough), but you are getting warmer. What I want to know is:

When and where does the Flash file load?
What page does the form POST to?

I'm getting the impression that the Flash file doesn't load until after the form is submitted, and that the form's action page is not the form's page. If I am right about that, you can concat the radio button's values in PHP from the POST on the page that loads when the form is submitted. From these values you can get the filename - all in PHP on the page that loads when the form is submitted. This will allow even non-javascript users to see the Flash file they have chosen. All the script will do is allow them to see the filename before they submit.

Anyway, here is my draft demo of the javascript:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Radio Concat Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">

/* Radio Concat Script ©2008 John Davenport Scheuer
   As first seen in http://www.dynamicdrive.com/forums/
   username: jscheuer1 - This notice must remain for legal use
   */

var radio_concat = {

form : 'flashform',
buttons : ['color', 'effect', 'font'],
output : 'swf_file',
extension : '.swf',

////////////// Stop Editing //////////////

func : function(e){
e = e? e : window.event;
var t = e.target? e.target : e.srcElement,
b = radio_concat.buttons,
testname = function(t){
if(t.name)
for (var i = b.length - 1; i > -1; --i)
if(t.name == b[i]) return true;
return false;
};
if(t.type && t.type == 'radio' && testname(t)){
for(var fil = '', r = radio_concat.form.elements, i = 0; i < r.length; ++i)
if(r[i].type && r[i].type == 'radio' && r[i].checked && testname(r[i]))
fil += r[i].value + (r[i].name == b[b.length - 1]? '' : '_');
r[radio_concat.output].value = fil + radio_concat.extension;
};
},
init : function(){
radio_concat.form = document.forms[radio_concat.form];
radio_concat.form.onclick = radio_concat.func;
}
};
if(typeof window.addEventListener!='undefined')
window.addEventListener('load', radio_concat.init, false);
else if(typeof window.attachEvent!='undefined')
window.attachEvent('onload', radio_concat.init);
else{
if(window.onload!=null){
var oldOnload=window.onload;
window.onload=function(e){
oldOnload(e);
radio_concat.init();
};}
else
window.onload=radio_concat.init;
}
</script>
</head>
<body>
<form action="#" name="flashform">
<div>
Pick Color:<br>
<label for="c0"><input id="c0" type="radio" name="color" value="green" checked>Green</label><br>
<label for="c1"><input id="c1" type="radio" name="color" value="red">Red</label>
</div>
<div><br>Pick Effect:<br>
<label for="e0"><input id="e0" type="radio" name="effect" value="no_fade" checked>No Fade</label><br>
<label for="e1"><input id="e1" type="radio" name="effect" value="fade_in">Fade</label>
</div>
<div><br>Pick Font Size:<br>
<label for="s0"><input id="s0" type="radio" name="font" value="size10" checked>10</label><br>
<label for="s1"><input id="s1" type="radio" name="font" value="size20">20</label>
</div>
<div><br>Current Choice:<br>
<input type="text" size="25" name="swf_file" value="green_no_fade_size10.swf" readonly><br>
<input type="submit" value="See It!">
</div>
</form>
</body>
</html>

[armasmike]

When and where does the Flash file load?

When the user loads any page.

What page does the form POST to?

it post to a database

If you want to take a look here is my test site.


http://www.dhentllc.com/~demomike/

This is how to get in the backend of the site.

http://www.dhentllc.com/~demomike/sohoadmin

username = demo
password = demo

ones your in the backend click on Plugin Features.

My plug-in is called Plugin-MA_Superbasic 2.8

This the plug-in that people use to edit the my template. This is where i put your code under the Flash Text tab.

[jscheuer1]

I'm not familiar with posting to a data base. One thing I noticed was that you have a mismatch in the script. If you want it to output to flashfile, you must have one and only one element in the form with that name (right now I see two, the text input and a select). And the script is currently set to output to:

var radio_concat = {

form : 'flashform',
buttons : ['color', 'effect', 'font'],
output : 'swf_file',
extension : '.swf',

////////////// Stop Editing //////////////

func : function(e){
e = e? e : window.event; . . .

You will also need to configure the name of the form into the script, it is currently set (as you can see) as 'flashform' in the script.

Anyways, I can see now that folks without javascript will never even see this part of the form, so we can forget about the doing the work over again on POST that is done by the script. You can just grab the value of of the text input. But, as I say, it must be configured in the script and be the only element in the form that has that name.

To more fully understand the script, perhaps you should try it out using only the code and supporting markup from my demo as separate page, just to see what it does.

But the important thing I think you need to do is make sure that the various items here:

form : 'flashform',
buttons : ['color', 'effect', 'font'],
output : 'swf_file',
extension : '.swf',

are configured properly for your form, and that you have no unintended duplicate named elements (other than your radio groups configured in the script as buttons : - and those names should only be repeated in each of their own given radio groups) in the form that could conflict.