Posted on

HTML5 multi upload crash course

Been working alot (and will be for a while more) so I don’t really want to devote the time needed for a real post, but this little tidbit saved me a bunch of trouble yesterday and I think it’s important enough to post.

HTML5 supports multiple selection of form inputs by adding the tag multiple="multiple" to the input. Only problem is that it PHP seems to want to take the last item from that list (since to PHP it’s seeing 5 $_POST items all with the same name, each one overwriting the one that came before it). The fix for this is two parts.

Part one is to form your input names so that PHP turns them into arrays. For example I used this for a image upload, it was originally was name="image" but by adding square brakets to the end of it like this name="image[]" when PHP saw that it placed it in an array, and in the case of the a file upload like I used for the images, it was all stored in the $_FILES array, making it look something like this:

Now I didn’t want to reinvent the wheel (or in this case reprogram the upload script) so I wanted to retrofit this into the upload field. The simplest way I could thing of is to count the number of items in the name field (as it’ll always have one for each) and then running the script once per file (using a while loop to count $i up to the maximum number of files as gotten by counting the items earlier) Then all I had to do was add [$i] to the end of all the calls that involve the $_FILES array and it grabbed the appropriate information. Simple as Simple Can be.

I know this is a messy post and not very well though through but I will make a more detailed posting, with appropriate example and Snipplr as soon as my contract at FR is complete, how long will that take? Don’t know, but should be to long.

I’d say that none of the code was testing, but there isn’t any, none of the variable names were checked, just going off of what I remember from yesterday/this morning from EM, like I said, better more detailed instructions soon.

Posted on

Simple Javascript Form Check

This is something I whipped up to make sure people weren’t submitting forms missing vital information, but I didn’t care if the information was wrong. It’s for a back end thing, the general public should be thoroughly checked (it’s a lowest common denominator thing) but if this is an important work related thing your not very likely to mess it up to terribly (but, check for anything that will break your script just in case they do). In this case it was a form that stores client information, if the names in the wrong place it can be edited and it’s not a big deal, but if you really want to ensure accuracy you can run additional checks inside each of the ifs for that articular thing.

Snipplr: http://snipplr.com/view/46271/simple-javascript-form-check/

Two things I’d like to note about this. First, if you have a very large form it should probably be done with a script that looks at all elements instead of using a line per element. Second, you have to make the submit button type="button" instead of type="submit" or you have to make it return true/false upon completion. I don’t see much of an advantage either way so I used a button for simpler testing and never changed it back.

Posted on

Javascript Navigation Part Deux

Yesterday i posted some code related to using JavaScript to assis in keyboard navigation of a website, In that post I mentioned there was a problem when manually scrolling past chapter, today I’ve fixed that problem and am posting the solution.

The Solution is not particularly difficult, all you need to do is determine the users position and then determine which header that would go under. First things first, a interval must be set up to run a script every so often, when testing I use 3 seconds as it gave me enough to to scroll around the page and make sure it was all working well, but the final version of the script I moved up to every half second. Setting up a command to run over so often is easy.

I set that up in an init function that I called once the page was loaded (that function also included getting all the H1 tags and setting some variables) then comes the locator function

Snipplr: http://snipplr.com/view/45934/better-javascript-keyboard-navigation/

That code will process all of the h1 tags and find the one your actually reading, and set the currentpos variable (part of the larger script in the post Working with Javascript Input) to wherever you are allowing you to skip headers based on your current location instead of your last location.

This code is in another example (again, this one is modified to work better work with project gutenburg formatting, this time it’s using H5 tags) on the examples page.

This code was made with the GoogleTV in mind, so no testing was done outside of webkit, but it should work fine in firefox and IE (although it might need a few modifications). If anybody has an application in mind for web use let me know and I can help you tweak it to work in the big 3 desktop browsers.

There are two other improvements I have in mind that I might incorporate in the future. The first is being able to type in the chapter number and the second is implementing smooth scrolling instead of the current jump to method. I’m not sure if I’ll do those any time soon, but it all depends on the time I have.