This code was working originally. Then I had made some modifications and things weren't going right so I went back to how it was originally, and now it's not working!

What this does is add a file text box when you click a button & then remove it when you click on its link. I get an error though when I click the Remove link saying that its argument is invalid. I don't understand why since its the exact same line of code the Add button has except assigned to a new variable.

This is the line that's coming up with the error: var d = document.getElementById('addToDiv'); in the removeAdditionalFile function. The error message says 'Invalid Argument'.

Here's the javascript:

function addFileTextbox()                                        
   {                                                                
     var a = document.getElementById('addToDiv');                 
     var b = document.getElementById('theValue');                 
     var c = (document.getElementById('theValue').value) + 1;     
     b.value = c;                                                   
     var newDiv = document.createElement('div');                  
     var divIDName = 'addToDiv' + c;                              
     newDiv.setAttribute('id', divIDName);                        
     newDiv.innerHTML = '<input type="file" name="' + divIDName + '" size="58"> <a href="#" onclick="removeAdditionalFile(' + divIDName + ')">Remove</a>';   
     a.appendChild(newDiv);                                         
   }                
                                                
   function removeAdditionalFile(divNum)                            
   {                                                                
     var d = document.getElementById('addToDiv');                 
     d.removeChild(divNum);                                         
   }

And here's the html:

To upload multiple files at once, click Add.
<br />
<input type="hidden" value="0" id="theValue">                                           
<input type="button" name="add" value="Add another file" onclick="addFileTextbox();"> 
<FORM METHOD="POST" ENCTYPE="multipart/form-data" ACTION="repos.exe">
<INPUT TYPE=HIDDEN NAME="proc" VALUE="fileupload">
<INPUT class="hidden" TYPE="HIDDEN" NAME="AREA" VALUE="3017">
<INPUT class="hidden" TYPE="HIDDEN" NAME="FOLDER" VALUE="125258">
Find File: <INPUT TYPE="FILE" size="58" NAME="FILE">
<div id="addToDiv"> </div> <!--additional file text boxes will be added here-->        
Description:  (optional)<BR>
<TEXTAREA NAME="DESC" ROWS="5" COLS="54" WRAP="PHYSICAL"></TEXTAREA>
<INPUT TYPE="submit" name="submit" value="Finish" onclick="startAnimation();">
<INPUT TYPE="BUTTON" NAME="CANCEL" VALUE="Cancel" OnClick="window.close();">

Can anyone see what's wrong?

Yes, in your remove code you are trying to remove an ID (e.g. a string/number, not a node)... add this line to your remove function.

function removeAdditionalFile(divNum) {                                                                
     var d = document.getElementById('addToDiv');
     var dnNode = document.getElementById(divNum);
     d.removeChild(dnNode);                                         
   }

Unfortunately that didn't work. I'm still getting the same error message of 'Invalid argument' but now it's saying that it's coming from the new line of code: var dnNode = document.getElementById(divNum); and I did remember to change that last line from d.removeChild(divNum); to d.removeChild(dnNode);

sorry I goofed on the code there... you are right, the first line should have been:

var dnNode = document.getElementById(divNum);

That said, I just noticed that you are setting the NAME of the field, not the ID... so either you also need to set an ID, or, change the line that tries to get that node, to find using the document.forms[idx].elements[divName] format instead.

I'm not sure what you mean. I have newDiv.setAttribute('id', divIDName); Isn't this setting the ID? And should I get rid of my first original line in the remove function?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.