jQuery - Adding / Removing Form Field Elements?

I have just got myself a copy of SWFUpload to show the progress of file uploads, however, it has a few problems, one of which I am trying to fix with the aid of jQuery. Essentially, if JavaScript doesn’t load, then a standard input file element will be shown. But, if JavaScript is enabled, then jQuery removes this, and replaces it with all of the input elements that SWFUpload requires.

Is this the best way of doing it, or should I be looking at another option?

If so, how would I go about telling jQuery to remove and insert the form field, and each and every attribute the HTML will require?

Yes, that seems sensible to me. Or you could design it in such a way that the standard inputs and the ones used by SWFUpload are the same ones.

Still, to remove elements just use jQuery’s handy remove() function:

$('#theForm input').remove()

That will remove all INPUT elements that are in the form with ID “theForm”.

Hmm, SWFUpload does use a text type field, and not a file one.
So, how would I got about adding the rest of the fields, in the exact place of the old one? I take it I would use append, but how do I set the rest of the attributes?

You can add the html content before the file field, and then remove the file field itself.


$('#fileField")
    .before('<input type="text" name="someName" />');
    .remove();

http://docs.jquery.com/Manipulation/append
http://docs.jquery.com/Manipulation/replaceWith

replaceWith combines the remove() and append() steps into one.

To set the right attributes: http://docs.jquery.com/Attributes

And one final thing, how can I tell if Flash is enabled or disabeled? The reason I ask this, is because JavaScript will still need to tell if it is, wether or not to hide or show the Flash, or default upload things. A friend pointed me to SWFObject, but, I don’t think this will work, as the .swf must be given in the init script of SWFUploader. So, is there a way to find out about Flash?

Thanks for all the help so far, and any further help that you can give me.

From the front page of its website:

Degrades gracefully to normal HTML upload form if Flash or javascript is unavailable

Give it a go and look at their documentation, that’s the best place to look. You probably won’t even need jQuery.

It doesn’t though. I turned JavaScript off, and, nothing (well, you get a ‘text’ box, not a file upload box). I’ll have another look at the documentation, but, I may have to revert to my method.

I was expecting SWFUpload to be able to cope with being given a file upload box, as it seems the logical thing to do. Are you sure it can’t do this (with JavaScript on obviously)? Otherwise, yes, you might have to revert to the original method above.

Unless it’s not set up properly, then, no, it uses this:


						<div>
							<div>
								<input type="text" id="txtFileName" disabled="true" style="border: solid 1px; background-color: #FFFFFF;" />
								<span id="spanButtonPlaceholder"></span>
								(10 MB max)
							</div>
							<div class="flash" id="fsUploadProgress">
								<!-- This is where the file progress gets shown.  SWFUpload doesn't update the UI directly.
											The Handlers (in handlers.js) process the upload events and make the UI updates -->
							</div>
							<input type="hidden" name="hidFileID" id="hidFileID" value="" />
							<!-- This is where the file ID is stored after SWFUpload uploads the file and gets the ID back from upload.php -->
						</div>

I’ll take a look at the other examples, and see if any of them use a type of file (which, I think they should), but, it is part of the API:


				file_post_name: "file_upload",

Which set’s the name for Server Side code.

So, then, is there a way of telling if Flash is on or off with jQuery / JavaScript?

All sorted, thanks for all help recieved.