By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,963 Members | 1,947 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,963 IT Pros & Developers. It's quick & easy.

How to add remove to this.

100+
P: 769
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 #1
Share this Question
Share on Google+
68 Replies


acoder
Expert Mod 15k+
P: 16,027
Rather than passing the full ID, pass in the upload number to use in a loop to change all the input field names. You can always add the "f" to get the id in the remove function.

Did you manage to get anywhere with the loop code?
Aug 20 '08 #2

100+
P: 769
Acoder,

Well i looked up some information on the loop an now i am just baffled on which loop to use. I was thinking of using the while loop, but not 100% sure that would be right. Here is the link i found on while loop http://www.w3schools.com/JS/js_loop_while.asp

an the other part i am baffled on completely.are you saying to take id out of it all together? because other wise i am just confused.

Thank you in advance,
Rach
Aug 20 '08 #3

acoder
Expert Mod 15k+
P: 16,027
A for loop is fine, no need for a while loop, though you could use that too if you want.

As for the ID passing, I meant something like this:
Expand|Select|Wrap|Line Numbers
  1. ...     l.setAttribute("href", "javascript:removeFileInput(upload_number+");");
  2. ...
  3. function removeFileInput(i)
  4. {
  5. // i is the upload number to delete and to loop from; to get the ID, just add "f":
  6.     var elm = document.getElementById("f"+i);
  7. ...
Aug 20 '08 #4

100+
P: 769
Acoder,

Here is what i tried but when i try to add another field i get object expected. Obviously i missed something, thinking i did the loop wrong. Does the loop need to be applied to the addFileInput and the removeFileInput or just to addFileInput?

Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  2.    for (i = 0; i <= 5; i++){
  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("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("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     upload_number = upload_number - 1
  30. }
  31. }
  32.  
Thanks in advance (an thank you for your patience),
Rach
Aug 20 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Sorry, that was a slight mistake on my part. It should be:
Expand|Select|Wrap|Line Numbers
  1. l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
The loop should be in the remove function only. It should start from i+1 till the total number of uploads. In the loop, get the file element and text field (description) element and change their names to one less than their current value.
Aug 20 '08 #6

100+
P: 769
Acoder,

I understood everything except the last part about getting the file element and description (i think) here is what i got.


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24. for (i+1; i <= 5; i++){
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     attachment+upload_number = attachment+upload_number - 1;
  30.     description+upload_number = description+upload_number -1;
  31.     upload_number = upload_number - 1
  32.  
  33. }}
i think i might of did the attachment an description wrong does it need to be like above or like attachment=attachment - 1 or am i missing something else?

Thank you in advance :),
Rach
Aug 20 '08 #7

acoder
Expert Mod 15k+
P: 16,027
The loop needs to be inside the function, not outside.

To get the file and text elements, you can use getElementsByName() or give them ids and use getElementById(), e.g.:
Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     for (j = i + 1; j <= upload_number; j++) {
  6.     attachment = document.getElementsByName("attachment"+j)[0];
  7.     description = document.getElementsByName("description"+j)[0];
  8.     attachment.setAttribute("name","attachment"+(j - 1));
  9.     description.setAttribute("name","description"+(j -1));
  10.     }
  11.     upload_number = upload_number - 1
  12. }
Aug 20 '08 #8

100+
P: 769
Hey Acoder,

I tried that an when i click remove i get the error of attachment
is null or not an object
. I even tried changing them to getElementById() an gave them both ids and i got object does not support this method. But here is what i got


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     for (j = i + 1; j <= upload_number; j++) {
  30.     attachment = document.getElementsByName("attachment"+j)[0];
  31.     description = document.getElementsByName("description"+j)[0];
  32.     attachment.setAttribute("name","attachment"+(j - 1));
  33.     description.setAttribute("name","description"+(j -1));
  34.     }
  35.     upload_number = upload_number - 1;
  36. }
here is what is in the form (don't know if showing this will help) but thought i would show it anyway just in case.
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">
Thank you again for all the help :),
Rach
Aug 20 '08 #9

RamananKalirajan
100+
P: 607
Hey Acoder,

I tried that an when i click remove i get the error of attachment . I even tried changing them to getElementById() an gave them both ids and i got object does not support this method. But here is what i got


Expand|Select|Wrap|Line Numbers
  1.    var upload_number = 1;
  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.      d.setAttribute("id", "f"+upload_number);
  9.      file.setAttribute("type", "file");
  10.      file.setAttribute("name", "attachment"+upload_number);
  11.      text.setAttribute("type", "text");
  12.      text.setAttribute("name", "description"+upload_number);
  13.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  14.      l.appendChild(document.createTextNode("Remove"));
  15.      d.setAttribute("id", "f"+upload_number);
  16.      d.appendChild(file);
  17.      d.appendChild(text);
  18.      d.appendChild(l);
  19.      document.getElementById("moreUploads").appendChild(d);
  20.      document.getElementById("totalAttachments").value = upload_number;
  21.      upload_number++;
  22.      }
  23.  
  24.  
  25. function removeFileInput(i)
  26. {
  27.     var elm = document.getElementById("f"+i);
  28.     document.getElementById("moreUploads").removeChild(elm);
  29.     for (j = i + 1; j <= upload_number; j++) {
  30.     attachment = document.getElementsByName("attachment"+j)[0];
  31.     description = document.getElementsByName("description"+j)[0];
  32.     attachment.setAttribute("name","attachment"+(j - 1));
  33.     description.setAttribute("name","description"+(j -1));
  34.     }
  35.     upload_number = upload_number - 1;
  36. }
here is what is in the form (don't know if showing this will help) but thought i would show it anyway just in case.
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">
Thank you again for all the help :),
Rach

Hi, Rach I did in a different way but i got the solution for ur problem.

[HTML]<html>
<body>
<input type="button" value="Attachment" onclick="doThis()">
<br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
</table>
</body>
</html>

<script type="text/javascript">
function doThis()
{
var myTab = document.getElementById('myTable');
var xx= document.createElement('input');
xx.type="file";

var row=myTab.rows.length;
var y=myTab.insertRow(row) ;
var b=y.insertCell(0);
b.appendChild(xx);
b.innerHTML = b.innerHTML;

var xy=document.createElement('input');
xy.type="button";
xy.value="Remove";
xy.onclick="removeThis(this)";
var c=y.insertCell(1);
c.appendChild(xy);
c.innerHTML=c.innerHTML;
}
function removeThis(ths)
{
var rowIndex = ths.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(rowIn dex);
}
</script>[/HTML]

Regards
Ramanan Kalirajan
Aug 21 '08 #10

acoder
Expert Mod 15k+
P: 16,027
Hey Acoder,

I tried that an when i click remove i get the error of attachment
Firstly, the upload_number should be 2 at the beginning as you had it earlier.

Secondly, in the loop, it should be j < upload_number instead of <=

Thirdly, you will also need to change the remove link to pass the correct number and the div id to reference the correct element too.

@Ramanan, that doesn't really answer the question. That part is already working, but I like your idea of using a button - much better than a link and the "javascript:" protocol.
Aug 21 '08 #11

RamananKalirajan
100+
P: 607
Firstly, the upload_number should be 2 at the beginning as you had it earlier.

Secondly, in the loop, it should be j < upload_number instead of <=

Thirdly, you will also need to change the remove link to pass the correct number and the div id to reference the correct element too.

@Ramanan, that doesn't really answer the question. That part is already working, but I like your idea of using a button - much better than a link and the "javascript:" protocol.
Thank You Mr. Acoder. This is my Idea. Not the solution. it simplifies and there is no confusion or complexity in the code.

Regards
Ramanan Kalirajan
Aug 21 '08 #12

100+
P: 769
Ramanan,

Yes a button is a good idea an was after i got the remove part working going to change it from a link to a button. I tried to do your example (wanted to see what you had done) but when i tried to click attachment i got the error saying object expected but then it wouldn't tell me where it was needed. But still thank you for the suggestion :).

Acoder,

I understood everything you said except the last part about changing the remove link to get the correct number and the div. completely baffled by what you mean.
here is what i got

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.      d.setAttribute("id", "f"+upload_number);
  11.      file.setAttribute("type", "file");
  12.      file.setAttribute("name", "attachment"+upload_number);
  13.      text.setAttribute("type", "text");
  14.      text.setAttribute("name", "description"+upload_number);
  15.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  16.      l.appendChild(document.createTextNode("Remove"));
  17.      d.setAttribute("id", "f"+upload_number);
  18.      d.appendChild(file);
  19.      d.appendChild(br);
  20.      d.appendChild(des);
  21.      d.appendChild(text);
  22.      d.appendChild(l);
  23.      document.getElementById("moreUploads").appendChild(d);
  24.      document.getElementById("totalAttachments").value = upload_number;
  25.      upload_number++;
  26.      }
  27.  
  28.  
  29. function removeFileInput(i)
  30. {
  31.     var elm = document.getElementById("f"+i);
  32.     document.getElementById("moreUploads").removeChild(elm);
  33.     for (j = i + 1; j < upload_number; j++) {
  34.     attachment = document.getElementsByName("attachment"+j)[0];
  35.     description = document.getElementsByName("description"+j)[0];
  36.     attachment.setAttribute("name","attachment"+(j - 1));
  37.     description.setAttribute("name","description"+(j -1));
  38.     }
  39.     upload_number = upload_number - 1;
  40. }
Thank you both for all the help,
Rach
Aug 21 '08 #13

acoder
Expert Mod 15k+
P: 16,027
You need to change the number that is being passed into the remove function otherwise it will try to remove the wrong div. Likewise with the div- you have to change the ID otherwise when you try to access the div to remove it, it will get the wrong div (or no div and cause an error).

For example, let's say you have three upload divs and you remove the second one. Currently, that would remove the second div and change the name of the attachment/description of the third to "2". The remove link, however, would still have "3" and the div ID would be "f3" instead of "f2". When you now add another div, that div's ID will be "f3" (so you have duplicate IDs) and the remove link will have 3 passed into it. Can you now see the problem?
Aug 21 '08 #14

100+
P: 769
Acoder,

I understand what your telling me and why we need to do it, i am just not sure how to apply what you said. I know i am not focusing today an i am sorry i am not focusing (lot been going on at home last 4 weeks, car trouble). But maybe if you could show me what lines are wrong it might help me understand and i could figure it out that way because i am just confused on what lines are wrong. But sorry i am making this difficult just really having a hard time understanding


But thank you again for all the help an patience,
Rach
Aug 21 '08 #15

RamananKalirajan
100+
P: 607
Ramanan,

Yes a button is a good idea an was after i got the remove part working going to change it from a link to a button. I tried to do your example (wanted to see what you had done) but when i tried to click attachment i got the error saying object expected but then it wouldn't tell me where it was needed. But still thank you for the suggestion :).

Acoder,

I understood everything you said except the last part about changing the remove link to get the correct number and the div. completely baffled by what you mean.
here is what i got

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.      d.setAttribute("id", "f"+upload_number);
  11.      file.setAttribute("type", "file");
  12.      file.setAttribute("name", "attachment"+upload_number);
  13.      text.setAttribute("type", "text");
  14.      text.setAttribute("name", "description"+upload_number);
  15.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  16.      l.appendChild(document.createTextNode("Remove"));
  17.      d.setAttribute("id", "f"+upload_number);
  18.      d.appendChild(file);
  19.      d.appendChild(br);
  20.      d.appendChild(des);
  21.      d.appendChild(text);
  22.      d.appendChild(l);
  23.      document.getElementById("moreUploads").appendChild(d);
  24.      document.getElementById("totalAttachments").value = upload_number;
  25.      upload_number++;
  26.      }
  27.  
  28.  
  29. function removeFileInput(i)
  30. {
  31.     var elm = document.getElementById("f"+i);
  32.     document.getElementById("moreUploads").removeChild(elm);
  33.     for (j = i + 1; j < upload_number; j++) {
  34.     attachment = document.getElementsByName("attachment"+j)[0];
  35.     description = document.getElementsByName("description"+j)[0];
  36.     attachment.setAttribute("name","attachment"+(j - 1));
  37.     description.setAttribute("name","description"+(j -1));
  38.     }
  39.     upload_number = upload_number - 1;
  40. }
Thank you both for all the help,
Rach
Hi Rach, I am sure that my code works good I tried it out. Can u please tell me at which line it is giving error. so that I can help u out.

Regards
Ramanan Kalirajan
Aug 21 '08 #16

100+
P: 769
Hey Ramanan,

Well i retried it and says line 27 an this is whats on line 27
Expand|Select|Wrap|Line Numbers
  1.   b.appendChild(xx);

Thank you,
Rach
Aug 21 '08 #17

acoder
Expert Mod 15k+
P: 16,027
maybe if you could show me what lines are wrong it might help me understand and i could figure it out that way because i am just confused on what lines are wrong.
There's no lines that are wrong, you just need to add more lines. You need to access the link and the div and then change their IDs. To access the link (give it an ID first) and div, use document.getElementById(id) (where id is the ID). For changing the ID, use setAttribute again.
Aug 21 '08 #18

100+
P: 769
There's no lines that are wrong, you just need to add more lines. You need to access the link and the div and then change their IDs. To access the link (give it an ID first) and div, use document.getElementById(id) (where id is the ID). For changing the ID, use setAttribute again.
Acoder,

Ok i know i did this way wrong but this is what i tried to do

Expand|Select|Wrap|Line Numbers
  1. var test=document.getElementById("id"+l);
  2. test.setAttribute("");
  3. d.appendChild(test);
but wanted to ask what function does it need to be in, in the add or the remove?
an i really don't know how to access the link nor the div. I mean would there names be to access them d and l since in the code there both written like this

Expand|Select|Wrap|Line Numbers
  1. var d = document.createElement("div");
  2.      var l = document.createElement("a");
or am i confused?

Thank you for all the help,
Rach
Aug 21 '08 #19

acoder
Expert Mod 15k+
P: 16,027
You need to make changes in both. In the add function, you need to add the IDs and in the remove function, you want to access and remove them. You can't access them with d and l because those are local variables only available in the add function.
Expand|Select|Wrap|Line Numbers
  1. function addFileInput()
  2.      {
  3. ...  l.setAttribute("id", "l"+upload_number);     
  4.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  5.      l.appendChild(document.createTextNode("Remove"));
  6.      d.setAttribute("id", "f"+upload_number);
  7. ...
  8.      }
  9.  
  10. function removeFileInput(i)
  11. {
  12. ...
  13.     for (j = i + 1; j < upload_number; j++) {
  14.         link = document.getElementById("l"+j);
  15. ...
  16.         link.setAttribute("id","l"+(j-1));
  17.         link.setAttribute("href", "javascript:removeFileInput("+(j-1)+");");
  18.     }
  19.     upload_number = upload_number - 1;
  20. }
and something similar for the div (not setting the href, of course).
Aug 21 '08 #20

100+
P: 769
Acoder,

Alrighty here is what i got, but i still did something wrong because still getting the same error. Theres one thing i added in the code which is the word description and a break tag. was trying to do a space tag, but not sure what i need to put in document.createElement("br") to make it space out instead of break.

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.      d.setAttribute("id", "f"+upload_number);
  11.      file.setAttribute("type", "file");
  12.      file.setAttribute("name", "attachment"+upload_number);
  13.      text.setAttribute("type", "text");
  14.      text.setAttribute("name", "description"+upload_number);
  15.      l.setAttribute("id", "l"+upload_number);  
  16.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  17.      l.appendChild(document.createTextNode("Remove"));
  18.      d.setAttribute("id", "f"+upload_number);
  19.      d.appendChild(file);
  20.      d.appendChild(br);
  21.      d.appendChild(des);
  22.      d.appendChild(text);
  23.      d.appendChild(l);
  24.      document.getElementById("moreUploads").appendChild(d);
  25.      document.getElementById("totalAttachments").value = upload_number;
  26.      upload_number++;
  27.      }
  28.  
  29. function removeFileInput(i)
  30. {
  31.     var elm = document.getElementById("f"+i);
  32.     document.getElementById("moreUploads").removeChild(elm);
  33.     for (j = i + 1; j < upload_number; j++) {
  34.     link = document.getElementById("l"+j);
  35.     attachment = document.getElementsByName("attachment"+j)[0];
  36.     description = document.getElementsByName("description"+j)[0];
  37.     attachment.setAttribute("name","attachment"+(j - 1));
  38.     description.setAttribute("name","description"+(j -1));
  39.     link.setAttribute("id","l"+(j-1));
  40.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  41.     }
  42.     upload_number = upload_number -1 ;
  43. }
  44.  
Thank you again :)
Rach
Aug 21 '08 #21

acoder
Expert Mod 15k+
P: 16,027
Is that the Coldfusion error or a JavaScript error?

Also don't forget to access the div and change its ID similar to the link.
Aug 21 '08 #22

100+
P: 769
Acoder,

Its definately a JavaScript error because the moment i click remove it comes up an says 'attachment' is null or not an object

an ok i tried to access the div an here is what i got. i am going to bold all the stuff for div i added.

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.      d.setAttribute("id", "f"+upload_number);
  11.      file.setAttribute("type", "file");
  12.      file.setAttribute("name", "attachment"+upload_number);
  13.      text.setAttribute("type", "text");
  14.      text.setAttribute("name", "description"+upload_number);
  15.      l.setAttribute("id", "d"+upload_number); 
  16.      l.setAttribute("id", "l"+upload_number);  
  17.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  18.      l.appendChild(document.createTextNode("Remove"));
  19.      d.setAttribute("id", "f"+upload_number);
  20.      d.appendChild(file);
  21.      d.appendChild(br);
  22.      d.appendChild(des);
  23.      d.appendChild(text);
  24.      d.appendChild(l);
  25.      document.getElementById("moreUploads").appendChild(d);
  26.      document.getElementById("totalAttachments").value = upload_number;
  27.      upload_number++;
  28.      }
  29.  
  30. function removeFileInput(i)
  31. {
  32.     var elm = document.getElementById("f"+i);
  33.     document.getElementById("moreUploads").removeChild(elm);
  34.     for (j = i + 1; j < upload_number; j++) {
  35.     link = document.getElementById("l"+j);
  36.     link = document.getElementById("d"+j);
  37.     attachment = document.getElementsByName("attachment"+j)[0];
  38.     description = document.getElementsByName("description"+j)[0];
  39.     attachment.setAttribute("name","attachment"+(j - 1));
  40.     description.setAttribute("name","description"+(j -1));
  41.     link.setAttribute("id","l"+(j-1));
  42.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  43.      link.setAttribute("id","d"+(j-1));
  44.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  45.     }
  46.     upload_number = upload_number -1 ;
  47. }
Thank you,
Rach
Aug 21 '08 #23

acoder
Expert Mod 15k+
P: 16,027
OK, that didn't quite go according to plan.

Remove line 15 since it's not needed. In the remove function, you can't use the link variable again otherwise it'll overwrite the previous declaration. Use another variable, e.g. div. Finally, a div does not have a href, so remove that line too.

What line does the error occur on?
Aug 21 '08 #24

100+
P: 769
Acoder,

Ok here is the updated code.

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.      d.setAttribute("id", "f"+upload_number);
  12.      file.setAttribute("type", "file");
  13.      file.setAttribute("name", "attachment"+upload_number);
  14.      text.setAttribute("type", "text");
  15.      text.setAttribute("name", "description"+upload_number);
  16.      l.setAttribute("id", "l"+upload_number);  
  17.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  18.      l.appendChild(document.createTextNode("Remove"));
  19.      d.setAttribute("id", "f"+upload_number);
  20.      d.appendChild(file);
  21.      d.appendChild(br);
  22.      d.appendChild(des);
  23.      d.appendChild(text);
  24.      d.appendChild(l);
  25.      document.getElementById("moreUploads").appendChild(d);
  26.      document.getElementById("totalAttachments").value = upload_number;
  27.      upload_number++;
  28.      }
  29.  
  30. function removeFileInput(i)
  31. {
  32.     var elm = document.getElementById("f"+i);
  33.     document.getElementById("moreUploads").removeChild(elm);
  34.     for (j = i + 1; j < upload_number; j++) {
  35.     link = document.getElementById("l"+j);
  36.     div = document.getElementById("d"+j);
  37.     attachment = document.getElementsByName("attachment"+j)[0];
  38.     description = document.getElementsByName("description"+j)[0];
  39.     attachment.setAttribute("name","attachment"+(j - 1));
  40.     description.setAttribute("name","description"+(j -1));
  41.     link.setAttribute("id","l"+(j-1));
  42.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  43.     div.setAttribute("id","d"+(j-1));
  44.     }
  45.     upload_number = upload_number -1 ;
  46. }
  47.  
  48. </script>


an 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.  

the error appears on the last line of the html or this line <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">

Thank you
Rach
Aug 21 '08 #25

RamananKalirajan
100+
P: 607
Hey Ramanan,

Well i retried it and says line 27 an this is whats on line 27
Expand|Select|Wrap|Line Numbers
  1.   b.appendChild(xx);

Thank you,
Rach
Whil u copy and run the code in the function removeThis(this) please note that some white spaces have been added in the field (rowIndex). remove that it will work

Regards
Ramanan Kalirajan
Aug 22 '08 #26

acoder
Expert Mod 15k+
P: 16,027
the error appears on the last line of the html or this line <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
That can't be correct. Which browser are you testing on?

I noticed that the ID of the divs are "f*" and you're trying to access them with "d*".
Aug 22 '08 #27

100+
P: 769
Ramanan,

All definately take a look at it, but thank you for all your help :)

Acoder,

I am testing it using internet explorer. An with the id part do i need to change these lines from saying d to f?

Expand|Select|Wrap|Line Numbers
  1. div = document.getElementById("d"+j);
  2. div.setAttribute("id","d"+(j-1));
  3.  
Thank you,
Rach
Aug 22 '08 #28

acoder
Expert Mod 15k+
P: 16,027
Yes, those are the lines you need to change.

Have you got another browser to test on, e.g. Firefox, Opera?
Aug 22 '08 #29

100+
P: 769
Hey Acoder,

Ok changed those lines an tested it in firefox and it works like its suppose to in firefox but the remove doesn't work right at all in internet explorer.

Here is the code changed.
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.      d.setAttribute("id", "f"+upload_number);
  11.      file.setAttribute("type", "file");
  12.      file.setAttribute("name", "attachment"+upload_number);
  13.      text.setAttribute("type", "text");
  14.      text.setAttribute("name", "description"+upload_number);
  15.      l.setAttribute("id", "l"+upload_number);  
  16.      l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
  17.      l.appendChild(document.createTextNode("Remove"));
  18.      d.setAttribute("id", "f"+upload_number);
  19.      d.appendChild(file);
  20.      d.appendChild(br);
  21.      d.appendChild(des);
  22.      d.appendChild(text);
  23.      d.appendChild(l);
  24.      document.getElementById("moreUploads").appendChild(d);
  25.      document.getElementById("totalAttachments").value = upload_number;
  26.      upload_number++;
  27.      }
  28.  
  29. function removeFileInput(i)
  30. {
  31.     var elm = document.getElementById("f"+i);
  32.     document.getElementById("moreUploads").removeChild(elm);
  33.     for (j = i + 1; j < upload_number; j++) {
  34.     link = document.getElementById("l"+j);
  35.     div = document.getElementById("f"+j);
  36.     attachment = document.getElementsByName("attachment"+j)[0];
  37.     description = document.getElementsByName("description"+j)[0];
  38.     attachment.setAttribute("name","attachment"+(j - 1));
  39.     description.setAttribute("name","description"+(j -1));
  40.     link.setAttribute("id","l"+(j-1));
  41.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  42.     div.setAttribute("id","f"+(j-1));
  43.     }
  44.     upload_number = upload_number -1 ;
  45. }
  46.  
but the error i get in internet explorer is attachment is null or not an object.this is could be with the html?
Any suggestions?

Thank you :),
Rach
Aug 22 '08 #30

acoder
Expert Mod 15k+
P: 16,027
Oh, this is an extremely annoying bug in IE which I forgot about.

If you create an input element dynamically, you can't set its name! On their website, they offer a workaround which is completely against the standard and causes errors in other browsers.

You'll need a try/catch to try the wrong way first and then catch the error and use the correct method. Hacky, but that's what we're used to as web developers.
Expand|Select|Wrap|Line Numbers
  1. try {
  2.    file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
  3. } catch (e) {
  4.   file = document.createElement("input");
  5. }
  6. // add setAttribute lines here...
Aug 22 '08 #31

100+
P: 769
Acoder,

Obviously i am missed/did something wrong. It works like its suppose to now in IE.if i choose to upload 3 it an decided to delete the 2nd one it does turn the 3rd one into the second one. But when i click submit i am still getting this error

Expand|Select|Wrap|Line Numbers
  1. Error Diagnostic Information
  2.  
  3. An error occurred while evaluating the expression: 
  4.  
  5.  currentDescription = form["description" & counter]
  6. Error near line 86, column 13.
  7. --------------------------------------------------------------------------------
  8.  
  9. The member "DESCRIPTION3" in dimension 1 of object "form" cannot be found. Please, modify the member name.
  10.  
  11.  
  12. The error occurred while processing an element with a general identifier of (CFSET), occupying document position (86:7) to (86:64) in the template file C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\userform.cfm.

here is what i got in userform.cfm. i am going to bold what line it says is the problem

Expand|Select|Wrap|Line Numbers
  1. <!---Inserts attachments into attachments.--->
  2. <cfif structKeyExists(FORM, "totalAttachments")>
  3.      <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
  4.      <cfparam name="FORM.totalAttachments" default="0">
  5.      <cfloop from="1" to="#form.totalAttachments#" index="counter">
  6.       <cfset currentDescription = form["description" & counter]>
  7.       <!---verify the form field exists --->
  8.      <cfif structKeyExists(FORM, "attachment"& counter)>
  9.           <!--- try and upload it ...--->
  10.           <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
  11.           <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
  12.           <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
  13.               <cfquery name="attachment" datasource="CustomerSupport">
  14.     exec usp_CS_Insertattachments
  15. '#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
  16. </cfquery>
  17.      </cfif>
  18.      </cfloop>
  19. </cfif>
  20.  
an here is what the javascript looks like with the changes i added
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.   file = 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("totalAttachments").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.     for (j = i + 1; j < upload_number; j++) {
  41.     link = document.getElementById("l"+j);
  42.     div = document.getElementById("f"+j);
  43.     attachment = document.getElementsByName("attachment"+j)[0];
  44.     description = document.getElementsByName("description"+j)[0];
  45.     attachment.setAttribute("name","attachment"+(j - 1));
  46.     description.setAttribute("name","description"+(j -1));
  47.     link.setAttribute("id","l"+(j-1));
  48.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  49.     div.setAttribute("id","f"+(j-1));
  50.     }
  51.     upload_number = upload_number -1 ;
  52. }
Any suggestions,

Thank you :)
Rach
Aug 22 '08 #32

acoder
Expert Mod 15k+
P: 16,027
A copy/paste error. Line 15 should be "text = ..."
Aug 22 '08 #33

100+
P: 769
Hey Acoder,

still getting the same error. but here is the javascript part corrected.

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("totalAttachments").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.     for (j = i + 1; j < upload_number; j++) {
  41.     link = document.getElementById("l"+j);
  42.     div = document.getElementById("f"+j);
  43.     attachment = document.getElementsByName("attachment"+j)[0];
  44.     description = document.getElementsByName("description"+j)[0];
  45.     attachment.setAttribute("name","attachment"+(j - 1));
  46.     description.setAttribute("name","description"+(j -1));
  47.     link.setAttribute("id","l"+(j-1));
  48.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  49.     div.setAttribute("id","f"+(j-1));
  50.     }
  51.     upload_number = upload_number -1 ;
  52. }
  53.  
it keeps saying the error is with this userform.cfm and on this line

Expand|Select|Wrap|Line Numbers
  1.  <cfset currentDescription = form["description" & counter]>
anyway possible that could be affecting it?

Thank you :),
Rach
Aug 22 '08 #34

acoder
Expert Mod 15k+
P: 16,027
Can you confirm if you test this in Firefox that it works or not?

The problem most likely is caused by lines 45/46 in the previous post in IE only.
Aug 22 '08 #35

100+
P: 769
Acoder,

Yep the same problem happens in firefox as well.

but what do you think is wrong with the 2 lines you mentioned?

Thank you,
Rach
Aug 22 '08 #36

acoder
Expert Mod 15k+
P: 16,027
Actually, I think the problem might be that you need to update the totalAttachments field:
Expand|Select|Wrap|Line Numbers
  1. document.getElementById("totalAttachments").value = upload_number-1;
Aug 22 '08 #37

100+
P: 769
Acoder

Sadly enough that didn't work either :(.

Here is the code updated.
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("totalAttachments").value = upload_number-1;;
  33.      upload_number++;
  34.      }
  35.  
  36. function removeFileInput(i)
  37. {
  38.     var elm = document.getElementById("f"+i);
  39.     document.getElementById("moreUploads").removeChild(elm);
  40.     for (j = i + 1; j < upload_number; j++) {
  41.     link = document.getElementById("l"+j);
  42.     div = document.getElementById("f"+j);
  43.     attachment = document.getElementsByName("attachment"+j)[0];
  44.     description = document.getElementsByName("description"+j)[0];
  45.     attachment.setAttribute("name","attachment"+(j - 1));
  46.     description.setAttribute("name","description"+(j -1));
  47.     link.setAttribute("id","l"+(j-1));
  48.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  49.     div.setAttribute("id","f"+(j-1));
  50.     }
  51.     upload_number = upload_number -1 ;
  52. }
  53.  
Thank you,
Rach
Aug 22 '08 #38

acoder
Expert Mod 15k+
P: 16,027
No I meant in the remove function. So change that line back and add the -1 line to the remove function at the end.
Aug 22 '08 #39

100+
P: 769
No I meant in the remove function. So change that line back and add the -1 line to the remove function at the end.
Acoder,

Ok i changed that line back, but with the remove are you meaning it like this

Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     for (j = i + 1; j < upload_number; j++) {
  6.     link = document.getElementById("l"+j);
  7.     div = document.getElementById("f"+j);
  8.     attachment = document.getElementsByName("attachment"+j)[0];
  9.     description = document.getElementsByName("description"+j)[0];
  10.     attachment.setAttribute("name","attachment"+(j - 1));
  11.     description.setAttribute("name","description"+(j -1));
  12.     link.setAttribute("id","l"+(j-1));
  13.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  14.     div.setAttribute("id","f"+(j-1));
  15.     }
  16.     upload_number = upload_number - 1 ;
  17. }-1

or like this

Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     for (j = i + 1; j < upload_number; j++) {
  6.     link = document.getElementById("l"+j);
  7.     div = document.getElementById("f"+j);
  8.     attachment = document.getElementsByName("attachment"+j)[0];
  9.     description = document.getElementsByName("description"+j)[0];
  10.     attachment.setAttribute("name","attachment"+(j - 1));
  11.     description.setAttribute("name","description"+(j -1));
  12.     link.setAttribute("id","l"+(j-1));
  13.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  14.     div.setAttribute("id","f"+(j-1));
  15.     }
  16.     document.getElementById("totalAttachments").value = upload_number - 1;
  17.     upload_number = upload_number - 1 ;
  18. }
Thank you,
Rach
Aug 22 '08 #40

acoder
Expert Mod 15k+
P: 16,027
The second one, but with lines 16 and 17 swapped.
Aug 22 '08 #41

100+
P: 769
Hey Acoder,

Ok well it worked correctly with no errors in firefox (and went into database), but still having trouble with internet explorer. With both i added 6 files and then tried to remove 2 ,4 and 6. When i removed the 2nd one i had no problems. but when i then tried to remove 4th file i got an error an the error was that attachments is null or not a number error and i tried to continue even though the error came up but it still wouldn't insert it into database.

Heres the new code

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("totalAttachments").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.     for (j = i + 1; j < upload_number; j++) {
  41.     link = document.getElementById("l"+j);
  42.     div = document.getElementById("f"+j);
  43.     attachment = document.getElementsByName("attachment"+j)[0];
  44.     description = document.getElementsByName("description"+j)[0];
  45.     attachment.setAttribute("name","attachment"+(j - 1));
  46.     description.setAttribute("name","description"+(j -1));
  47.     link.setAttribute("id","l"+(j-1));
  48.     link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
  49.     div.setAttribute("id","f"+(j-1));
  50.     }
  51.     upload_number = upload_number - 1 ;
  52.     document.getElementById("totalAttachments").value = upload_number - 1;
  53.  
  54. }
Thank you for all the help (an sorry this is being so frustrating),
Rach
Aug 22 '08 #42

acoder
Expert Mod 15k+
P: 16,027
At least you know that it should work, but IE doesn't want to play fair.

Those two lines I mentioned earlier, the problem with them is that there's no problem with them. It's just IE's buggy behaviour that comes to the fore again. It's the same setAttribute name problem. This one is more difficult to solve because you're not creating, but renaming.

If I have time over the weekend, I'll see if I can come up with a solution.
Aug 22 '08 #43

100+
P: 769
Hey Acoder,

Well i just wanted to say thank you for all the help you are given me i know i been a good amount of a pain in the rear. but please don't worry about it over the weekend, have fun over the weekend. i won't be able to work on it till monday anyway because don't got coldfusion on home computer:(. But still thank you for all the help you are given me i really do appreciate it all the help :)

Thank you,
Rach
Aug 22 '08 #44

100+
P: 769
Hey Acoder,

just wanted to ask if you were able to figure out a solution to the IE problem? I was thinking about it an maybe just putting a count in there would help. i used this in another part of my form http://www.dustindiaz.com/add-and-re...th-javascript/
but anyway in it they used a count an this seems to work fine in IE. but just thought i show you this an see if maybe this would help.

But again thank you for all your help,
Rach
Aug 26 '08 #45

acoder
Expert Mod 15k+
P: 16,027
The removing part isn't the problem, it's the renaming that causes problems in IE.

You could try using the same name for each element and then loop over them, e.g. attachment[], description[], so there's no renaming involved.
Aug 26 '08 #46

100+
P: 769
Ok i am guessing, but something like this?

Expand|Select|Wrap|Line Numbers
  1. function removeFileInput(i)
  2. {
  3.     var elm = document.getElementById("f"+i);
  4.     document.getElementById("moreUploads").removeChild(elm);
  5.     for (j = i + 1; j < upload_number; j++) {
  6.     link = document.getElementById("l"+j);
  7.     div = document.getElementById("f"+j);
  8.     attachment = document.getElementsByName("attachment"+j)[];
  9.     description = document.getElementsByName("description"+j)[];
  10.     attachment.setAttribute("name","attachment"+(j));
  11.     description.setAttribute("name","description"+(j ));
  12.     link.setAttribute("id","l"+(j-1));
  13.     link.setAttribute("href", "javascript:removeFileInput("+(j)+");");
  14.     div.setAttribute("id","f"+(j-1));
  15.     }
  16.     upload_number = upload_number - 1 ;
  17.     document.getElementById("totalAttachments").value = upload_number - 1;
  18.  
  19. }
  20.  
Thank you,
Rach
Aug 26 '08 #47

acoder
Expert Mod 15k+
P: 16,027
No, not quite. You'd need to make quite a few changes actually. You should first test with only one input and submit to the server-side. The change you need to make on the server is look for "attachment[]"-named form elements (and "description[]" too. Loop over them to test that it can work.

On the client-side, instead of naming elements attachment1, attachment2, etc., name them all "attachment[]". This may be the best solution for this problem. There are other alternatives you could consider too.
Aug 26 '08 #48

100+
P: 769
ok i get what your saying, just not 100% sure how to apply it.

Ok on my userform.cfm here is what i am guessing you what me to change

Expand|Select|Wrap|Line Numbers
  1. change these 2
  2. <cfset currentDescription = form["description" & counter]>
  3.  <cfif structKeyExists(FORM, "attachment"& counter)>
  4. 2 this
  5. <cfset currentDescription = form["description" & []]>
  6.  <cfif structKeyExists(FORM, "attachment" & [])>
here is what userform.cfm looks like in total
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>



an on the client side i am guessing

Expand|Select|Wrap|Line Numbers
  1.  from this
  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.  
  11. to this
  12. <input type="file" name="attachment[]" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  13.  Description <input type="text" name="description[]" id="description" value="" /> 
  14.           <div id="moreUploads"></div>
  15.           <div id="moreUploadsLink" style="display:none;">
  16.           <input type="button" value="Attach another file" 
  17.    onclick="javascript:addFileInput();" >
  18.           </div>
  19.           <input type="hidden" id="totalAttachments" name="totalAttachments" value="1">
is that correct?

Thank you,
Rach
Aug 26 '08 #49

acoder
Expert Mod 15k+
P: 16,027
Actually, that was just an idea that I know will work with PHP, but not tested with Coldfusion.

I know one way that can work with Coldfusion or for that matter any language. Keep a hidden field that contains the upload numbers to upload, e.g.
Expand|Select|Wrap|Line Numbers
  1. <input type="hidden" name="uploads" id="uploads" value="1">
then when adding, just add the upload number to this field. When removing, just remove that number from the field. What you will end up with is a list of numbers which you can loop over on the server-side to determine which field names to use to upload. This whole process avoids the need to rename any of the elements.
Aug 26 '08 #50

68 Replies

Post your reply

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