Kingy Posted October 5, 2009 Share Posted October 5, 2009 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 More sharing options...
justsomeguy Posted October 5, 2009 Share Posted October 5, 2009 Do you have a version of that code that's indented? Link to comment Share on other sites More sharing options...
Synook Posted October 5, 2009 Share Posted October 5, 2009 And not all on one line Link to comment Share on other sites More sharing options...
Kingy Posted October 6, 2009 Author Share Posted October 6, 2009 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 More sharing options...
justsomeguy Posted October 6, 2009 Share Posted October 6, 2009 You're saying that with Opera if you click in a text field and start typing the form submits? Link to comment Share on other sites More sharing options...
Kingy Posted October 7, 2009 Author Share Posted October 7, 2009 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 More sharing options...
Kingy Posted October 12, 2009 Author Share Posted October 12, 2009 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] 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted October 12, 2009 Share Posted October 12, 2009 You only need to create one row container, add both buttons to the same container. Right now you're creating 2 containers and adding one button to each. Link to comment Share on other sites More sharing options...
Kingy Posted October 12, 2009 Author Share Posted October 12, 2009 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); };}; Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.