1

I have a link which generates file upload fields through a JavaScript function. However, when I add an upload field, then select a file, then add another field, the file disappears from the first field. I don't see why this should be happeneing.

jsFiddle: http://jsfiddle.net/etCqD/

Note that the jsFiddle gives an error 'addPhoto() is not defined' which I also don't understand as the function is clearly defined in the JavaScript section. This error doesn't happen on my actual page. Can someone tell me what's going on here?

Improve this question
2
  • 1
    "Note that the jsFiddle gives an error 'addPhoto() is not defined' which I also don't understand as the function is clearly defined in the JS section." — Look at your preferences on the left hand side. The code is being wrapped in a function assigned to onload. That means that addPhoto is scoped to that function and not accessible form outside it (e.g. from the intrinsic event attribute that you should not be using anyway) Commented Aug 23, 2012 at 10:45
  • Indeed, I didn't realize that preference was there - must have been left over from some previous fiddle I did. Commented Aug 23, 2012 at 10:52

1 Answer 1

Reset to default
3

You are editing the innerHTML. This means that you serialise the DOM to HTML then change the HTML and convert the HTML back to DOM.

This destroys the value since:

  • The value attribute will contain the default value
  • You can't set a value attribute for file inputs

Use createElement, appendNode and friends instead.

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks, appendChild did the trick, looked like the easiest one to use. Will accept your answer in 5 minutes.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.