Jump to content

Strange Problem In Opera


Kingy
 Share

Recommended Posts

I am currently trying to create this form which I hope will upload files via php.However my main concern right now isn't the uploading part, I have this set up here as seen in this link: http://empulse.dmu.ac.uk/upload/album_upload2.htmIn firefox and IE, this works (as in basic form functions not actual uploading), so if I click on browse and look for a while or type something in I can upload a file as I want,it then generates another field for me to upload anothe file, with a maximum number of files you can upload being 12.If I go to opera though and I click in the input box, if I type anything on my keyboard it generates up as if it submitted and it messes up the page. Hope I'm making sense, and here's the javascript.

function MultiSelector( list_target, max ){this.list_target = list_target;this.count = 0;this.id = 0;if( max ){this.max = max;} else {this.max = -1;};this.addElement = function( element ){if( element.tagName == 'INPUT' && element.type == 'file' ){element.name = 'file_' + this.id++;element.multi_selector = this;element.onchange = function(){var new_element = document.createElement( 'input' );new_element.type = 'file';this.parentNode.insertBefore( new_element, this );this.multi_selector.addElement( new_element );this.multi_selector.addListRow( this );this.style.position = 'absolute';this.style.left = '-1000px';};if( this.max != -1 && this.count >= this.max ){element.disabled = true;};this.count++;this.current_element = element;} else {alert( 'Error: not a file input element' );};};this.addListRow = function( element ){var new_row = document.createElement( 'div' );var new_row_button = document.createElement( 'input' );new_row_button.type = 'button';new_row_button.value = 'Delete';new_row.element = element;new_row_button.onclick= function(){this.parentNode.element.parentNode.removeChild( this.parentNode.element );this.parentNode.parentNode.removeChild( this.parentNode );this.parentNode.element.multi_selector.count--;this.parentNode.element.multi_selector.current_element.disabled = false;return false;};new_row.innerHTML = element.value;new_row.appendChild( new_row_button );this.list_target.appendChild( new_row );};};

Thanks a lot in advance as always.

Link to comment
Share on other sites

Ooops sorry guys that's the compressed file!Here's the uncompressed one. :)

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' ){			// Element name -- what number am I?			element.name = 'file_' + this.id++;			// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';				// Add new element				this.parentNode.insertBefore( new_element, this );				// Apply 'update' to element				this.multi_selector.addElement( new_element );				// Update list				this.multi_selector.addListRow( this );				// Hide this				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If  reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// Apply to file input elements			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){		// Row div		var new_row = document.createElement( 'div' );		// Delete button		var new_row_button = document.createElement( 'input' );		new_row_button.type = 'button';		new_row_button.value = 'Delete';		// References		new_row.element = element;		// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;		};		// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild( new_row_button );		// Add it to the list		this.list_target.appendChild( new_row );			};};

Link to comment
Share on other sites

Um not exactly submit the page.You see that if you click browse and upload a file, it'll generate another line with the file target?It just does that everytime you type a single character in, and I think it's not very good for the user to be able to break it in such a way.

Link to comment
Share on other sites

Hmm I have been requested to make changes to the interface now....I need to make an edit button that will make a form popup for each field as well as a delete button.However using this method I seem to generate 2 separate parts, one with a delete button, another with an edit button so it looks like below instead of with each other.[New Link: http://empulse.dmu.ac.uk/upload/Alternativ.../albupload.html]upload_doubleprob.jpg

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' ){			// Element name -- what number am I?			element.name = 'file_' + this.id++;			// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';				// Add new element				this.parentNode.insertBefore( new_element, this );				// Apply 'update' to element				this.multi_selector.addElement( new_element );				// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){		// Row div		var new_row = document.createElement( 'div' );		var new_row2 = document.createElement('div');		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row2_button = document.createElement('input');		new_row2_button.type = 'button';		new_row2_button.value = 'Edit';		// References		new_row.element = element;		new_row2.element = element;				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}		// Edit function				new_row2_button.onclick= function(){			alert("Edit button");			return false;		};		// Set row value		new_row.innerHTML = element.value;		new_row2.innerHTML = element.value;		// Add button		new_row.appendChild( new_row_button );		new_row2.appendChild(new_row2_button);		// Add it to the list		this.list_target.appendChild(new_row);		this.list_target.appendChild(new_row2);			};};

Thank you again in advance. :)

Edited by Kingy
Link to comment
Share on other sites

Thanks I just noticed that a moment ago actually, it's a monday I'm not working very logically. :)I'm just trying to fix up the edit button style now so that it goes next to the delete, that should go ok. :)Afterwards I'm going to create a 'popup' form for the edit button so they can edit details of each file uploaded, that'll be fun... :)Thanks very much as usual!For peoples reference, working code so far (without the proposed functions for edit button yet other than an alert):

function MultiSelector( list_target, max ){	// Where to write the list	this.list_target = list_target;	// How many elements?	this.count = 0;	// How many elements?	this.id = 0;	// Is there a maximum?	if( max ){		this.max = max;	} else {		this.max = -1;	};		/**	 * Add a new file input element	 */	this.addElement = function( element ){		// Make sure it's a file input element		if( element.tagName == 'INPUT' && element.type == 'file' ){			// Element name -- what number am I?			element.name = 'file_' + this.id++;			// Add reference to this object			element.multi_selector = this;			// What to do when a file is selected			element.onchange = function(){				// New file input				var new_element = document.createElement( 'input' );				new_element.type = 'file';				// Add new element				this.parentNode.insertBefore( new_element, this );				// Apply 'update' to element				this.multi_selector.addElement( new_element );				// Update list				this.multi_selector.addListRow( this );				// Hide this: we can't use display:none because Safari doesn't like it				this.style.position = 'absolute';				this.style.left = '-1000px';			};			// If we've reached maximum number, disable input element			if( this.max != -1 && this.count >= this.max ){				element.disabled = true;			};			// File element counter			this.count++;			// Most recent element			this.current_element = element;					} else {			// This can only be applied to file input elements!			alert( 'Error: not a file input element' );		};	};	/**	 * Add a new row to the list of files	 */	this.addListRow = function( element ){				// Row div		var new_row = document.createElement( 'div' );<!-- 	var new_row2 = document.createElement('div'); -->		// Delete button		var new_row_button = document.createElement('input');		new_row_button.type = 'button';		new_row_button.value = 'Delete';				//Edit button		var new_row_button2 = document.createElement('input');		new_row_button2.type = 'button';		new_row_button2.value = 'Edit';		new_row_button2.style.float = 'right';		// References		new_row.element = element;		<!-- new_row2.element = element; -->				// Delete function		new_row_button.onclick= function(){			// Remove element from form			this.parentNode.element.parentNode.removeChild( this.parentNode.element );			// Remove this row from the list			this.parentNode.parentNode.removeChild( this.parentNode );			// Decrement counter			this.parentNode.element.multi_selector.count--;			// Re-enable input element (if it's disabled)			this.parentNode.element.multi_selector.current_element.disabled = false;			// Appease Safari			//    without it Safari wants to reload the browser window			//    which nixes your already queued uploads			return false;			}		// Edit function				new_row_button2.onclick= function(){			alert("Edit button");			return false;		};			// Set row value		new_row.innerHTML = element.value;		// Add button		new_row.appendChild(new_row_button2);		new_row.appendChild( new_row_button );				// Add it to the list		this.list_target.appendChild(new_row);				};};

Edited by Kingy
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...