Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > javascript > answers

How to add remove to this.

Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#1: Aug 19 '08
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
Page 1 of 2 1 2 >
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Aug 20 '08

re: How to add remove to this.

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?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#3: Aug 20 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Aug 20 '08

re: How to add remove to this.

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. ...
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#5: Aug 20 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#6: Aug 20 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#7: Aug 20 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#8: Aug 20 '08

re: How to add remove to this.

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. }
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#9: Aug 20 '08

re: How to add remove to this.

Hey Acoder,

I tried that an when i click remove i get the error of attachment
Quote:
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
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#10: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#11: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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.
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#12: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by acoder

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
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#13: Aug 21 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#14: Aug 21 '08

re: How to add remove to this.

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?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#15: Aug 21 '08

re: How to add remove to this.

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
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#16: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#17: Aug 21 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#18: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#19: Aug 21 '08

re: How to add remove to this.

Quote:

Originally Posted by acoder

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#20: Aug 21 '08

re: How to add remove to this.

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).
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#21: Aug 21 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#22: Aug 21 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#23: Aug 21 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#24: Aug 21 '08

re: How to add remove to this.

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?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#25: Aug 21 '08

re: How to add remove to this.

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
RamananKalirajan's Avatar
Needs Regular Fix
  
Join Date: Mar 2008
Location: Chennai - India
Posts: 348
#26: Aug 22 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#27: Aug 22 '08

re: How to add remove to this.

Quote:

Originally Posted by bonneylake

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*".
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#28: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#29: Aug 22 '08

re: How to add remove to this.

Yes, those are the lines you need to change.

Have you got another browser to test on, e.g. Firefox, Opera?
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#30: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#31: Aug 22 '08

re: How to add remove to this.

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...
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#32: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#33: Aug 22 '08

re: How to add remove to this.

A copy/paste error. Line 15 should be "text = ..."
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#34: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#35: Aug 22 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#36: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#37: Aug 22 '08

re: How to add remove to this.

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;
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#38: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#39: Aug 22 '08

re: How to add remove to this.

No I meant in the remove function. So change that line back and add the -1 line to the remove function at the end.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#40: Aug 22 '08

re: How to add remove to this.

Quote:

Originally Posted by acoder

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#41: Aug 22 '08

re: How to add remove to this.

The second one, but with lines 16 and 17 swapped.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#42: Aug 22 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#43: Aug 22 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#44: Aug 22 '08

re: How to add remove to this.

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
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#45: Aug 26 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#46: Aug 26 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#47: Aug 26 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#48: Aug 26 '08

re: How to add remove to this.

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.
Site Addict
  
Join Date: Aug 2008
Location: United States
Posts: 769
#49: Aug 26 '08

re: How to add remove to this.

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
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#50: Aug 26 '08

re: How to add remove to this.

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.
Reply
Page 1 of 2 1 2 >

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,376 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved