How to add remove to this.

[bonneylake]

Hey Acoder,

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

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("uploads").value += "," + upload_number;
     upload_number++;
     }

Thank you so much for all the help on this :),
Rach

[acoder]

To add space, you can use the non-breaking space character, but it won't work with createTextNode( ). For that, you'll need to use the unicode character \u00a0:
[code=javascript]var nbsp = document.create TextNode("\u00a 0");[/code]then append this.

[bonneylake]

Hey Acoder,

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

Rach

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

<script type="text/javascript">
   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 nbsp = document.createTextNode("\u00a0");
	 var space = document.createTextNode("\u00a0");
<!---	 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(nbsp);
	 d.appendChild(des);
<!---	 d.appendChild(br);--->
	  d.appendChild(space);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
	 document.getElementById("uploads").value += "," + upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");
}
</script>

html

<input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" name="uploads" id="uploads" value="1">

[acoder]

OK, I guess that means it worked ;)

I think there's one last thing you had left - to replace the link with a button as shown by Ramanan above.

[bonneylake]

Acoder,

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

   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("input");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var nbsp = document.createTextNode("\u00a0");
	 var space = document.createTextNode("\u00a0");
<!---	 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.type="button";
	 l.value="Remove";
	 l.onclick="javascript:removeFileInput("+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(nbsp);
	 d.appendChild(des);
<!---	 d.appendChild(br);--->
	  d.appendChild(space);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
	 document.getElementById("uploads").value += "," + upload_number;
     upload_number++;
     }

Thank you,
Rach

[bonneylake]

i figured out how to get this to work in internet explorer and firefox!

Thank you again for all the help acoder!

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

<script type="text/javascript">
   var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("input");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var nbsp = document.createTextNode("\u00a0");
	 var space = document.createTextNode("\u00a0");
<!---	 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+"'>");
   l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+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("type", "button");
	 l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
	 
	 l.type="button";
	 l.value="Remove";
	 l.onclick="javascript:removeFileInput("+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(nbsp);
	 d.appendChild(des);
<!---	 d.appendChild(br);--->
	  d.appendChild(space);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
	 document.getElementById("uploads").value += "," + upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");

}

</script>

[acoder]

Try:
[code=javascript]l.onclick=funct ion() {removeFileInpu t(upload_number )};[/code]or you could create a variable function reference and assign that instead.

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

[bonneylake]

Try:
[code=javascript]l.onclick=funct ion() {removeFileInpu t(upload_number )};[/code]or you could create a variable function reference and assign that instead.

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

Hey Acoder,

well i ran into one more problem. if you wouldn't mind solving it.
I tried to send the form without uploading a file an got this error

Error processing CFFILE

No data was received in the uploaded file '\' Saving empty (zero-length) files is prohibitted. Please make sure you specified the correct file.

how would i send the form without having a file in it?

heres the javascript

 var upload_number = 2;
     function addFileInput()
     {
     var d = document.createElement("div");
	 var l = document.createElement("input");
     var file = document.createElement("input");
	 var text = document.createElement("input");
	 var nbsp = document.createTextNode("\u00a0");
	 var space = document.createTextNode("\u00a0");
<!---	 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+"'>");
   l = document.createElement("<input type='button' onclick='javascript:removeFileInput("+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("type", "button");
	 l.setAttribute("onclick", "javascript:removeFileInput("+upload_number+")");
	 
	 l.type="button";
	 l.value="Remove";
	 l.onclick="javascript:removeFileInput("+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(nbsp);
	 d.appendChild(des);
<!---	 d.appendChild(br);--->
	  d.appendChild(space);
	 d.appendChild(text);
	 d.appendChild(l);
     document.getElementById("moreUploads").appendChild(d);
	 document.getElementById("uploads").value += "," + upload_number;
     upload_number++;
     }

function removeFileInput(i)
{
	var elm = document.getElementById("f"+i);
    document.getElementById("moreUploads").removeChild(elm);
document.getElementById("uploads").value = document.getElementById("uploads").value.replace(i,"");

}

heres the html

 <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
 Description <input type="text" name="description1" id="description" value="" /> 
          <div id="moreUploads"></div>
          <div id="moreUploadsLink" style="display:none;">
          <input type="button" value="Attach another file" 
   onclick="javascript:addFileInput();" >
          </div>
          <input type="hidden" name="uploads" id="uploads" value="1">

thank you again for all the help,
Rach

[acoder]

This is actually a Coldfusion problem and the error-checking should be done on the server-side, though you can help the user by checking on the client-side too. This would be achieved by having uploads set to empty to begin with. When you select a file for the first attachment, set it to "1". Just a note that you should never depend on JavaScript error-checking.

For the Coldfusion error-checking, it's back to the other thread.