Javascript remove problem?
-
Hey Everyone, what i am trying to do is everytime a file is uploaded i want a remove button to appear next to it. This works fine. However, the problem i am having is every time i hover over the remove button you get the following names for example if i have 3 files the first file with a remove will say javascript:removeFileInput(f1), the second javascript:removeFileInput(f2),and 3rd javascript:removeFileInput(f3). The problem with this is if i remove the second file the first one will still say f1, but the problem is with the 3rd one. The third one should change to f2 (since removing the second one makes the 3rd become the second one) but instead it still remains f3 and i am wondering how could i make it change to f2 ? the reason i need to be able to do this is because if i try to insert it into my database it gives me an error an asks for f2. Here is the code i have javascript <script type="text/javascript"> var upload_number = 1; function addFileInput() { var d = document.createElement("div"); var l = document.createElement("a"); var file = document.createElement("input"); var 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("href", "javascript:removeFileInput('f"+upload_n… l.appendChild(document.createTextNode("R… d.setAttribute("id", "f"+upload_number); d.appendChild(file); d.appendChild(text); d.appendChild(l); document.getElementById("moreUploads"). appendChild(d); document.getElementById("totalAttachment… = upload_number; upload_number++; } function removeFileInput(i) { var elm = document.getElementById(i); document.getElementById("moreUploads"). removeChild(elm); upload_number = upload_number - 1 } </script> form <input type="file" name="attachment1" id="attachments" value="" onchange="document.getElementById('moreU… 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" id="totalAttachments" name="totalAttachments" value="1"> Thank you in advance, Rach
-
Answer:
Since I can't see all of your code, I can't be sure, but the following may give you some ideas about how to approach the problem. The notion would be to call renumber() after calling (or at the end of) removeFileInput(). function renumber() { // convenience reference to doc object var d = document; // collection of all divs in page var divs = d.getElementsByTagName( 'DIV' ); var last = divs.length; // counter for renumeration var count = 1; for (var i = 0; i < last; i++) { // reference to current div to examine var div = divs[i]; // if the id starts 'f', look deeper if ('f' == div.id.charAt( 0 ) ) { // chop the leading 'f' - remainder COULD be the // previous value of the upload number var upNum = div.id.substring( 1 ); // if the div has a child with a name like 'description' // with a suffix like its own, treat this as a 'hit' if (hasChildNamed( div, 'description', upNum ); { // new, renumbered div id var dId = 'f' + count; // new, renumbered text name var tName = 'description' + count; // new, renumbered file name var fName = 'attachment' + count; // get references to the text and file elements var text = getChildByName( div, 'description', upNum ); var file = getChildByName( div, 'attachment', upNum ); // change the id and name attributes text.setAttribute( 'name', tname ); file.setAttribute( 'name', fname ); div.setAttribute( 'id', dId ); count++; // iterate the count } } } } function getChildByName( parent, name ) { // collection of all children of parent var children = parent.childNodes; var last = childNodes.length; for (var i = 0; i < last; i++) { var child = childNodes[i]; // if any child has the right name, return a // reference to it, exiting immediately if ( name == child.name) { return child; } } // none found above - return null return null; } function hasChildNamed( parent, name ) { return null != getChildByName( parent, name ); }
Rach at Yahoo! Answers Visit the source
Related Q & A:
- Is this problem a knapsack problem?Best solution by Programming Puzzles & Code Golf
- How do I remove a site from IIS7 using JavaScript?Best solution by Server Fault
- Why is Javascript called Javascript, if it has nothing to do with Java?Best solution by Stack Overflow
- How can I remove duplicate Objects from array of Objects in javascript?Best solution by Stack Overflow
- How can I remove a casset tape from my car player? It is a 2003 Hyundai Sonota. Does anyone else this problem?Best solution by Yahoo! Answers
Just Added Q & A:
- How many active mobile subscribers are there in China?Best solution by Quora
- How to find the right vacation?Best solution by bookit.com
- How To Make Your Own Primer?Best solution by thekrazycouponlady.com
- How do you get the domain & range?Best solution by ChaCha
- How do you open pop up blockers?Best solution by Yahoo! Answers
For every problem there is a solution! Proved by Solucija.
-
Got an issue and looking for advice?
-
Ask Solucija to search every corner of the Web for help.
-
Get workable solutions and helpful tips in a moment.
Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.