How to add remove to this.

[acoder]

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.
[code=javascript]try {
file = document.create Element("<input type='file' name='attachmen t"+upload_numbe r+"'>");
} catch (e) {
file = document.create Element("input" );
}
// add setAttribute lines here...[/code]

[bonneylake]

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

Error Diagnostic Information

An error occurred while evaluating the expression: 

 currentDescription = form["description" & counter]
Error near line 86, column 13.
--------------------------------------------------------------------------------

The member "DESCRIPTION3" in dimension 1 of object "form" cannot be found. Please, modify the member name.


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

<!---Inserts attachments into attachments.--->
<cfif structKeyExists(FORM, "totalAttachments")>
     <cfset currentDirectory = GetDirectoryFromPath(GetTemplatePath()) & "uploaded">
     <cfparam name="FORM.totalAttachments" default="0">
     <cfloop from="1" to="#form.totalAttachments#" index="counter">
     [B] <cfset currentDescription = form["description" & counter]>[/B]
      <!---verify the form field exists --->
     <cfif structKeyExists(FORM, "attachment"& counter)>
          <!--- try and upload it ...--->
          <cffile action="upload" fileField="form.attachment#counter#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\" nameconflict="MAKEUNIQUE">
          <cfset filename = cffile.ClientFileName & "_" & form.id & "_" & counter & "." & cffile.ClientFileExt>
          <CFFILE ACTION="RENAME" SOURCE="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#CFFILE.ServerFile#" destination="C:\Inetpub\Development\WWWRoot\RachelB\footprints\form\attachments\#filename#">
              <cfquery name="attachment" datasource="CustomerSupport">
    exec usp_CS_Insertattachments
'#Form.ID#','#evaluate(serialnum)#','#currentDescription#','#filename#','#Form.fk_addedBy#'
</cfquery>
     </cfif>
     </cfloop>
</cfif>

an here is what the javascript looks like with the changes i added

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("a");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var br = document.createElement("br");
	 var des = document.createTextNode("Description")
	 try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  file = document.createElement("input");
}
	 d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
	 text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
	 l.setAttribute("id", "l"+upload_number);  
	 l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
	 d.appendChild(br);
	 d.appendChild(des);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}

Any suggestions,

Thank you :)
Rach

[acoder]

A copy/paste error. Line 15 should be "text = ..."

[bonneylake]

Hey Acoder,

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

  var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("a");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var br = document.createElement("br");
	 var des = document.createTextNode("Description")
	 try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
	 d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
	 text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
	 l.setAttribute("id", "l"+upload_number);  
	 l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
	 d.appendChild(br);
	 d.appendChild(des);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}

it keeps saying the error is with this userform.cfm and on this line

 <cfset currentDescription = form["description" & counter]>

anyway possible that could be affecting it?

Thank you :),
Rach

[acoder]

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.

[bonneylake]

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]

Actually, I think the problem might be that you need to update the totalAttachment s field:
[code=javascript]document.getEle mentById("total Attachments").v alue = upload_number-1;[/code]

[bonneylake]

Acoder

Sadly enough that didn't work either :(.

Here is the code updated.

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("a");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var br = document.createElement("br");
	 var des = document.createTextNode("Description")
	 try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
	 d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
	 text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
	 l.setAttribute("id", "l"+upload_number);  
	 l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
	 d.appendChild(br);
	 d.appendChild(des);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number-1;;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number -1 ;
}

Thank you,
Rach

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

[bonneylake]

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

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
    upload_number = upload_number - 1 ;
}-1

or like this

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
	document.getElementById("totalAttachments").value = upload_number - 1;
    upload_number = upload_number - 1 ;
}

Thank you,
Rach

[acoder]

The second one, but with lines 16 and 17 swapped.

[bonneylake]

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

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("a");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var br = document.createElement("br");
	 var des = document.createTextNode("Description")
	 try {
   file = document.createElement("<input type='file' name='attachment"+upload_number+"'>");
   text = document.createElement("<input type='text' name='description"+upload_number+"'>");
} catch (e) {
  file = document.createElement("input");
  text = document.createElement("input");
}
	 d.setAttribute("id", "f"+upload_number);
     file.setAttribute("type", "file");
     file.setAttribute("name", "attachment"+upload_number);
	 text.setAttribute("type", "text");
     text.setAttribute("name", "description"+upload_number);
	 l.setAttribute("id", "l"+upload_number);  
	 l.setAttribute("href", "javascript:removeFileInput("+upload_number+");");
     l.appendChild(document.createTextNode("Remove"));
     d.setAttribute("id", "f"+upload_number);
     d.appendChild(file);
	 d.appendChild(br);
	 d.appendChild(des);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
     document.getElementById("totalAttachments").value = upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
    for (j = i + 1; j < upload_number; j++) {
	link = document.getElementById("l"+j);
	div = document.getElementById("f"+j);
    attachment = document.getElementsByName("attachment"+j)[0];
    description = document.getElementsByName("description"+j)[0];
    attachment.setAttribute("name","attachment"+(j - 1));
    description.setAttribute("name","description"+(j -1));
    link.setAttribute("id","l"+(j-1));
    link.setAttribute("href", "javascript:removeFileInput("+(j - 1)+");");
	div.setAttribute("id","f"+(j-1));
    }
	upload_number = upload_number - 1 ;
	document.getElementById("totalAttachments").value = upload_number - 1;

}

Thank you for all the help (an sorry this is being so frustrating),
Rach

[acoder]

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.

[bonneylake]

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

[bonneylake]

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