473,407 Members | 2,314 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > how to add remove to this.

Join Bytes to post your question to a community of 473,407 software developers and data experts.

How to add remove to this.

769 512MB
Hey Everyone,

Well what i am trying to do is create a multiple file upload. I have it uploading multiple files just fine. However, now i am trying to add a remove link to each file i upload.

Basically how it works is they choose files to upload an then when they click submit it uploads the files. An now for every file they choose to upload i want it to have a remove button next to it so that if they change there mind they won't have to deal with the problem of having to clear the field themselves (this needs to be done before they click submit). The problem i am having is with the remove part.

Example lets say i decide to upload 3 files an i decide i don't need the second file. The problem i am having is when i go to upload it to my database it still sees the 2nd file there an gives me an error. it will say that there is nothing in the 2nd file when in fact i deleted the 2nd file. But i am wondering how can i make it do this. if i have 3 files f1,f2, f3 how can i instead of it saying f1,f3 (it appears like this if i delete the 2nd file) how can i make it say f1,f2.

i know my explanation is a bit confusing. I have been posting this question in coldfusion part of the forum. but now my question has become more a javascript question then a coldfusion question. But here is a link to that part of the form which might explain what i am trying to do a bit better.
http://bytes.com/forum/showthread.ph...88#post3309788

But here is the code i got

javascript
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.   var upload_number = 1;
  3.      function addFileInput()
  4.      {     
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      d.setAttribute("id", "f"+upload_number);
  10.      file.setAttribute("type", "file");
  11.      file.setAttribute("name", "attachment"+upload_number);
  12.      text.setAttribute("type", "text");
  13.      text.setAttribute("name", "description"+upload_number);
  14.      l.setAttribute("href", "javascript:removeFileInput('f"+upload_number+"');");
  15.      l.appendChild(document.createTextNode("Remove"));
  16.      d.setAttribute("id", "f"+upload_number);
  17.      d.appendChild(file);
  18.      d.appendChild(text);
  19.      d.appendChild(l);
  20.      document.getElementById("moreUploads").appendChild(d);
  21.      document.getElementById("totalAttachments").value = upload_number;
  22.      upload_number++;
  23.      }
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById(i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     upload_number = (upload_number - 1) + 2;
  30. }
  31. </script>
the html part
Expand|Select|Wrap|Line Numbers
  1. <form action="userform.cfm" id="userForm"  name="userForm" method="POST" enctype="multipart/form-data">
  2.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  3.  Description <input type="text" name="description1" id="description" value="" /> 
  4.           <div id="moreUploads"></div>
  5.           <div id="moreUploadsLink" style="display:none;">
  6.           <input type="button" value="Attach another file" 
  7.    onclick="javascript:addFileInput();" >
  8.           </div>
  9.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
  10. <input type="submit" class="officalsubmit" value="submit" name="submit">
  11. </form>
the coldfusion part (action page it goes to once you click submit)
Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
Thanks in advance ,
Rach
Aug 19 '08
68 5302
bonneylake
769 512MB
Hey Acoder

Don't i have the hidden field already going on right now in my form by using totalAttachments?

heres the html with totalAttachments in it.
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
an i believe i am also doing the looping now my action page page.
Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
  19.  
the only part i am not understanding is this

then when adding, just add the upload number to this field. When removing, just remove that number from the field
or am i confused an do i have neither?

Thank you :),
Rach
Aug 26 '08 #51
acoder
16,027 Expert Mod 8TB
That hidden field is just a simple number. What this new field would have is a list of numbers referring to the numbers in the names of the attachment/description fields, e.g. "1,4,5,6,8" if 2, 3 and 7 were deleted.
Aug 26 '08 #52
bonneylake
769 512MB
Hey Acoder,

alrighty i see what you mean on the difference. But what needs to stay an what needs to go because we have done so much to it i am not sure where to begin.

here is the javascript again.
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9. <!---     var br = document.createElement("br");--->
  10.      var des = document.createTextNode("Description")
  11.      try {
  12.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  13.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  14. } catch (e) {
  15.   file = document.createElement("input");
  16.   text = document.createElement("input");
  17. }
  18.      d.setAttribute("id", "f"+upload_number);
  19.      file.setAttribute("type", "file");
  20.      file.setAttribute("name", "attachment"+upload_number);
  21.      text.setAttribute("type", "text");
  22.      text.setAttribute("name", "description"+upload_number);
  23.      l.setAttribute("id", "l"+upload_number);  
  24.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  25.      l.appendChild(document.createTextNode("Remove"));
  26.      d.setAttribute("id", "f"+upload_number);
  27.      d.appendChild(file);
  28. <!---     d.appendChild(br);--->
  29.      d.appendChild(des);
  30.      d.appendChild(text);
  31.      d.appendChild(l);
  32.      document.getElementById("moreUploads").appendChild(d);
  33.      document.getElementById("totalAttachments").value = upload_number;
  34.      upload_number++;
  35.      }
  36.  
  37. function removeFileInput(i)
  38. {
  39.     var elm = document.getElementById("f"+i);
  40.     document.getElementById("moreUploads").removeChild(elm);
  41.     for (j = i + 1; j < upload_number; j++) {
  42.     link = document.getElementById("l"+j);
  43.     div = document.getElementById("f"+j);
  44.     attachment = document.getElementsByName("attachment"+j)[0];
  45.     description = document.getElementsByName("description"+j)[0];
  46.     attachment.setAttribute("name","attachment"+(j - 1));
  47.     description.setAttribute("name","description"+(j -1));
  48.     link.setAttribute("id","l"+(j-1));
  49.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  50.     div.setAttribute("id","f"+(j-1));
  51.     }
  52.     upload_number = upload_number - 1 ;
  53.     document.getElementById("totalAttachments").value = upload_number - 1;
  54.  
  55. }

here is the html

Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
  9.           <input type="hidden" name="uploads" id="uploads" value="1">
Thank you again for all the help :),
Rach
Aug 26 '08 #53
acoder
16,027 Expert Mod 8TB
You don't need the total-attachments field anymore because you can work it out from the new hidden field. In the add function, you only need to change the last line to change the uploads hidden field instead of totalAttachments (instead of adding 1, you need to add a number as a string separated by commas, e.g.
Expand|Select|Wrap|Line Numbers
  1. ...value += "," + upload_number;
. In the remove function, you can comment out or get rid of the for loop - the renaming is not needed any more. Again, you need to change the total attachments line to remove the upload number from the list of upload numbers.
Aug 27 '08 #54
bonneylake
769 512MB
Hey Acoder,

alrighty well here is the changes i made.

Expand|Select|Wrap|Line Numbers
  1.   var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," upload_number;
  33.      upload_number++;
  34.      }
  35.  
  36. function removeFileInput(i)
  37. {
  38.     var elm = document.getElementById("f"+i);
  39.     document.getElementById("moreUploads").removeChild(elm);
  40.     upload_number = upload_number - 1 ;
  41.     document.getElementById("uploads").value = upload_number - 1;
  42.  
  43. }
html
Expand|Select|Wrap|Line Numbers
  1. <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
the only thing i am concerned about is taking out totalAttachments since it appears in the action page. are you sure taking out totalAttachments won't mess with the action page? here whats on the action page

Expand|Select|Wrap|Line Numbers
  1. <cfif structKeyExists(FORM, "totalAttachments")>
  2.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  3.      <cfparam name="FORM.totalAttachments" default="0">
  4.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  5.       <cfset currentDescription = form["description" & counter]>
  6.       <!---verify the form field exists --->
  7.      <cfif structKeyExists(FORM, "attachment"& counter)>
  8.           <!--- try and upload it ...--->
  9.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  10.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  11.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  12.               <cfquery name="attachment" datasource="CustomerSupport">
  13.     exec usp_CS_Insertattachments
  14. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  15. </cfquery>
  16.      </cfif>
  17.      </cfloop>
  18. </cfif>
Thank you for the help,
Rach
Aug 27 '08 #55
acoder
16,027 Expert Mod 8TB
You'll have to modify the action page too for this to work. Instead of using totalAttachments, use the uploads string value which will be a comma-delimited string to determine which fields contain the upload information. If you can't get that working, post in the original Coldfusion forum thread.

Just one more thing: the remove code isn't quite correct. You need to remove the upload number from the field value using replace() and you don't need to decrease the upload_number any longer.
Aug 27 '08 #56
bonneylake
769 512MB
Hey Acoder,

all definitely post the coldfusion part back in the previous question. because i understand the part about changing the name but the part about the comma-delimited string part has me a bit confused.

but for the remove part do i need to do it like this

what was previously written
Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     upload_number = upload_number - 1 ;
  6.     document.getElementById("uploads").value = upload_number - 1;
  7.  
  8. }

what i changed
Expand|Select|Wrap|Line Numbers
  1. {
  2.     var elm = document.getElementById("f"+i);
  3.     document.getElementById("moreUploads").removeChild(elm);
  4.     upload_number = upload_number - 1 ;
  5.     document.getElementById("uploads").value = replace(upload_number);
  6.  
  7. }
Thank you,
Rach
Aug 27 '08 #57
acoder
16,027 Expert Mod 8TB
Not quite. You don't need to decrease the upload_number. In fact, you shouldn't, so remove that line. replace() is a string method, so you need to use it like this:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
Aug 27 '08 #58
bonneylake
769 512MB
Hey Acoder,

Alrighty should this be the whole thing in a nut shell?

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," upload_number;
  33.      upload_number++;
  34.      }
  35.  
  36. function removeFileInput(i)
  37. {
  38.     var elm = document.getElementById("f"+i);
  39.     document.getElementById("moreUploads").removeChild(elm);
  40. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  41.  
  42. }
html
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
the reason i ask is because right now if i click add attachment it wont let me even add another attachment. an i took it to firefox and it said addFileInput is not defined.

Thank you,
Rach
Aug 27 '08 #59
acoder
16,027 Expert Mod 8TB
Ah, an elementary mistake:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("uploads").value += "," + upload_number;
Aug 27 '08 #60
bonneylake
769 512MB
Hey Acoder,

Alrighty that works right now (yay). Just got to get the server-side part going which i posted back in coldfusion. But i do got one last question to ask on this. When you click add attachment (to upload multiple files) it puts the word description really close to the file input an i was wondering how would you put some space between the word description and the file input? i been trying to figure it out by myself but i really can't get it. i figured out how to do a break (which you will see is commented out). but i can't figure out how i would just simply space it out.

Expand|Select|Wrap|Line Numbers
  1. var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("a");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8. <!---     var br = document.createElement("br");--->
  9.      var des = document.createTextNode("Description")
  10.      try {
  11.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  12.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  13. } catch (e) {
  14.   file = document.createElement("input");
  15.   text = document.createElement("input");
  16. }
  17.      d.setAttribute("id", "f"+upload_number);
  18.      file.setAttribute("type", "file");
  19.      file.setAttribute("name", "attachment"+upload_number);
  20.      text.setAttribute("type", "text");
  21.      text.setAttribute("name", "description"+upload_number);
  22.      l.setAttribute("id", "l"+upload_number);  
  23.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  24.      l.appendChild(document.createTextNode("Remove"));
  25.      d.setAttribute("id", "f"+upload_number);
  26.      d.appendChild(file);
  27. <!---     d.appendChild(br);--->
  28.      d.appendChild(des);
  29.      d.appendChild(text);
  30.      d.appendChild(l);
  31.      document.getElementById("moreUploads").appendChild(d);
  32.      document.getElementById("uploads").value += "," + upload_number;
  33.      upload_number++;
  34.      }

Thank you so much for all the help on this :),
Rach
Aug 27 '08 #61
acoder
16,027 Expert Mod 8TB
To add space, you can use the non-breaking space character, but it won't work with createTextNode(). For that, you'll need to use the unicode character \u00a0:
Expand|Select|Wrap|Line Numbers
  1. var nbsp = document.createTextNode("\u00a0");
then append this.
Aug 27 '08 #62
bonneylake
769 512MB
Hey Acoder,

wow that kills me. I was trying that exact thing an couldn't get it to work!!! i didn't realize you couldn't do it with createTextNode() which now it makes so much since why it didn't work! But THANK YOU SO MUCH for all the help!!! you truely are awesome :) THANK YOU, THANK YOU!!!!

Rach

In case anyone else wants to see the resolution to the javascript an html here it is.

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("a");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      var nbsp = document.createTextNode("\u00a0");
  10.      var space = document.createTextNode("\u00a0");
  11. <!---     var br = document.createElement("br");--->
  12.      var des = document.createTextNode("Description")
  13.      try {
  14.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  15.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  16. } catch (e) {
  17.   file = document.createElement("input");
  18.   text = document.createElement("input");
  19. }
  20.      d.setAttribute("id", "f"+upload_number);
  21.      file.setAttribute("type", "file");
  22.      file.setAttribute("name", "attachment"+upload_number);
  23.      text.setAttribute("type", "text");
  24.      text.setAttribute("name", "description"+upload_number);
  25.      l.setAttribute("id", "l"+upload_number);  
  26.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  27.      l.appendChild(document.createTextNode("Remove"));
  28.      d.setAttribute("id", "f"+upload_number);
  29.      d.appendChild(file);
  30.      d.appendChild(nbsp);
  31.      d.appendChild(des);
  32. <!---     d.appendChild(br);--->
  33.       d.appendChild(space);
  34.      d.appendChild(text);
  35.      d.appendChild(l);
  36.      document.getElementById("moreUploads").appendChild(d);
  37.      document.getElementById("uploads").value += "," + upload_number;
  38.      upload_number++;
  39.      }
  40.  
  41. function removeFileInput(i)
  42. {
  43.     var elm = document.getElementById("f"+i);
  44.     document.getElementById("moreUploads").removeChild(elm);
  45. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  46. }
  47. </script>
html
Expand|Select|Wrap|Line Numbers
  1. <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
Aug 27 '08 #63
acoder
16,027 Expert Mod 8TB
OK, I guess that means it worked ;)

I think there's one last thing you had left - to replace the link with a button as shown by Ramanan above.
Aug 27 '08 #64
bonneylake
769 512MB
Acoder,

yeah your right an i been playing with it. But i messed it up :(. i got the button to appear but wont let me remove any.

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("input");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8.      var nbsp = document.createTextNode("\u00a0");
  9.      var space = document.createTextNode("\u00a0");
  10. <!---     var br = document.createElement("br");--->
  11.      var des = document.createTextNode("Description")
  12.      try {
  13.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  14.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  15. } catch (e) {
  16.   file = document.createElement("input");
  17.   text = document.createElement("input");
  18. }
  19.      d.setAttribute("id", "f"+upload_number);
  20.      file.setAttribute("type", "file");
  21.      file.setAttribute("name", "attachment"+upload_number);
  22.      text.setAttribute("type", "text");
  23.      text.setAttribute("name", "description"+upload_number);
  24.      l.setAttribute("id", "l"+upload_number);  
  25.      l.type="button";
  26.      l.value="Remove";
  27.      l.onclick="javascript:removeFileInput("+upload_number+")";
  28. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  29. <!---     l.appendChild(document.createTextNode("Remove"));--->
  30.      d.setAttribute("id", "f"+upload_number);
  31.      d.appendChild(file);
  32.      d.appendChild(nbsp);
  33.      d.appendChild(des);
  34. <!---     d.appendChild(br);--->
  35.       d.appendChild(space);
  36.      d.appendChild(text);
  37.      d.appendChild(l);
  38.      document.getElementById("moreUploads").appendChild(d);
  39.      document.getElementById("uploads").value += "," + upload_number;
  40.      upload_number++;
  41.      }

Thank you,
Rach
Aug 27 '08 #65
bonneylake
769 512MB
i figured out how to get this to work in internet explorer and firefox!

Thank you again for all the help acoder!

here is the FINAL results to the javascript (html is same as above)

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2.    var upload_number = 2;
  3.      function addFileInput()
  4.      {
  5.      var d = document.createElement("div");
  6.      var l = document.createElement("input");
  7.      var file = document.createElement("input");
  8.      var text = document.createElement("input");
  9.      var nbsp = document.createTextNode("\u00a0");
  10.      var space = document.createTextNode("\u00a0");
  11. <!---     var br = document.createElement("br");--->
  12.      var des = document.createTextNode("Description")
  13.      try {
  14.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  15.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  16.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  17. } catch (e) {
  18.   file = document.createElement("input");
  19.   text = document.createElement("input");
  20. }
  21.      d.setAttribute("id", "f"+upload_number);
  22.      file.setAttribute("type", "file");
  23.      file.setAttribute("name", "attachment"+upload_number);
  24.      text.setAttribute("type", "text");
  25.      text.setAttribute("name", "description"+upload_number);
  26.      l.setAttribute("id", "l"+upload_number);  
  27.      l.setAttribute("type", "button");
  28.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  29.  
  30.      l.type="button";
  31.      l.value="Remove";
  32.      l.onclick="javascript:removeFileInput("+upload_number+")";
  33. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  34. <!---     l.appendChild(document.createTextNode("Remove"));--->
  35.      d.setAttribute("id", "f"+upload_number);
  36.      d.appendChild(file);
  37.      d.appendChild(nbsp);
  38.      d.appendChild(des);
  39. <!---     d.appendChild(br);--->
  40.       d.appendChild(space);
  41.      d.appendChild(text);
  42.      d.appendChild(l);
  43.      document.getElementById("moreUploads").appendChild(d);
  44.      document.getElementById("uploads").value += "," + upload_number;
  45.      upload_number++;
  46.      }
  47.  
  48. function removeFileInput(i)
  49. {
  50.     var elm = document.getElementById("f"+i);
  51.     document.getElementById("moreUploads").removeChild(elm);
  52. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  53.  
  54. }
  55.  
  56. </script>
Aug 27 '08 #66
acoder
16,027 Expert Mod 8TB
Try:
Expand|Select|Wrap|Line Numbers
  1. l.onclick=function() {removeFileInput(upload_number)};
or you could create a variable function reference and assign that instead.

Edit: Oh, I posted this without realising you'd solved it. Well done.
Aug 27 '08 #67
bonneylake
769 512MB
Try:
Expand|Select|Wrap|Line Numbers
  1. l.onclick=function() {removeFileInput(upload_number)};
or you could create a variable function reference and assign that instead.

Edit: Oh, I posted this without realising you'd solved it. Well done.
Hey Acoder,

well i ran into one more problem. if you wouldn't mind solving it.
I tried to send the form without uploading a file an got this error
Expand|Select|Wrap|Line Numbers
  1. Error processing CFFILE
  2.  
  3. No data was received in the uploaded file '\' Saving empty (zero-length) files is prohibitted. Please make sure you specified the correct file. 
how would i send the form without having a file in it?

heres the javascript
Expand|Select|Wrap|Line Numbers
  1.  var upload_number = 2;
  2.      function addFileInput()
  3.      {
  4.      var d = document.createElement("div");
  5.      var l = document.createElement("input");
  6.      var file = document.createElement("input");
  7.      var text = document.createElement("input");
  8.      var nbsp = document.createTextNode("\u00a0");
  9.      var space = document.createTextNode("\u00a0");
  10. <!---     var br = document.createElement("br");--->
  11.      var des = document.createTextNode("Description")
  12.      try {
  13.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  14.    text = document.createElement("<input type='text' name='description"+upload_number+"'>");
  15.    l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+upload_number+");'>");
  16. } catch (e) {
  17.   file = document.createElement("input");
  18.   text = document.createElement("input");
  19. }
  20.      d.setAttribute("id", "f"+upload_number);
  21.      file.setAttribute("type", "file");
  22.      file.setAttribute("name", "attachment"+upload_number);
  23.      text.setAttribute("type", "text");
  24.      text.setAttribute("name", "description"+upload_number);
  25.      l.setAttribute("id", "l"+upload_number);  
  26.      l.setAttribute("type", "button");
  27.      l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
  28.  
  29.      l.type="button";
  30.      l.value="Remove";
  31.      l.onclick="javascript:removeFileInput("+upload_number+")";
  32. <!---     l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");--->
  33. <!---     l.appendChild(document.createTextNode("Remove"));--->
  34.      d.setAttribute("id", "f"+upload_number);
  35.      d.appendChild(file);
  36.      d.appendChild(nbsp);
  37.      d.appendChild(des);
  38. <!---     d.appendChild(br);--->
  39.       d.appendChild(space);
  40.      d.appendChild(text);
  41.      d.appendChild(l);
  42.      document.getElementById("moreUploads").appendChild(d);
  43.      document.getElementById("uploads").value += "," + upload_number;
  44.      upload_number++;
  45.      }
  46.  
  47. function removeFileInput(i)
  48. {
  49.     var elm = document.getElementById("f"+i);
  50.     document.getElementById("moreUploads").removeChild(elm);
  51. document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
  52.  
  53. }
heres the html
Expand|Select|Wrap|Line Numbers
  1.  <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  2.  Description <input type="text" name="description1" id="description" value="" /> 
  3.           <div id="moreUploads"></div>
  4.           <div id="moreUploadsLink" style="display:none;">
  5.           <input type="button" value="Attach another file" 
  6.    onclick="javascript:addFileInput();" >
  7.           </div>
  8.           <input type="hidden" name="uploads" id="uploads" value="1">
thank you again for all the help,
Rach
Aug 28 '08 #68
acoder
16,027 Expert Mod 8TB
This is actually a Coldfusion problem and the error-checking should be done on the server-side, though you can help the user by checking on the client-side too. This would be achieved by having uploads set to empty to begin with. When you select a file for the first attachment, set it to "1". Just a note that you should never depend on JavaScript error-checking.

For the Coldfusion error-checking, it's back to the other thread.
Aug 28 '08 #69

Sign in to post your reply or Sign up for a free account.

Similar topics

23
Remove items from a list
by: Stan Cook | last post by:
I was trying to take a list of files in a directory and remove all but the ".dbf" files. I used the following to try to remove the items, but they would not remove. Any help would be greatly...
Python
4
vb.net remove method
by: wk6pack | last post by:
Hi, I'm trying to use the remove method on a string but it doesnt seem to change it. name.remove(instr(name," ")-1,1) If name = bon jovi, I would like bonjovi but I get bon jovi in the...
.NET Framework
3
Remove and Rename using fstream
by: Venkat | last post by:
Hi All, Currently i guess rename and remove are not supported using fstream. How do i rename or remove a file? regards, Venkat
C / C++
6
list remove and insert
by: Arne Claus | last post by:
Hi If've just read, that remove() on a list does not actually remove the elements, but places them at the end of the list (according to TC++STL by Josuttis). It also says, that remove returns a...
C / C++
6
session.remove vs session.contents.remove
by: tshad | last post by:
Is there a reason to use session.remove over session.contents.remove? Don't they both remove the key and data from the contents collection? I assume that session(x) = nothing does essentially...
ASP.NET
6
remove() [ to delete a file ] fails
by: sam_cit | last post by:
Hi Everyone, I'm using remove() function to delete a file, and i observed the following behavior, Concerned file : sample.txt Operation : i open the file in read mode and don't close the...
C / C++
1
how to remove specified cookie in cookie jar?
by: ken | last post by:
How to remove specified cookie (via a given name) in cookie jar? I have the following code, but how can I remove a specified cookie in the cookie jar? cj = cookielib.LWPCookieJar() if cj is...
Python
10
remove ArrayList[n] inside foreach() loop?
by: =?Utf-8?B?YmJn?= | last post by:
Hi all, I wanted to go through each entry(?) of ArrayList and remove some particular entry. So I tried following but it throws exception at runtime: foreach (myEntry entry in myArrayList) {...
C# / C Sharp
4
Difference between del and remove?
by: Yansky | last post by:
Got a quick n00b question. What's the difference between del and remove?
Python
20
Problem trying to remove BAS module after running a procedure within it
by: Nates | last post by:
I have a .bas file saved locally that I load into my Acces project to run a particular sub. I use the following code to load the module (which works fine): I use the following loop to remove...
Microsoft Access / VBA
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
Windows Server
0
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...
Microsoft Access / VBA

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!