Question

I have successfully created an HTML form that gets a file from a user and also allows giving a name for the file. I have also succeeded in creating a javascript function that can get the name of the file from the upload stream, and only the name (without the path and extension). Problem is, I somewhat do not manage to change the input that’s there for renaming the upload like I want to. Here is the working function with two demonstrative alerts:

<script type="text/javascript">
function updateInput(val) {
    som = val.split('\\')[val.split('\\').length - 1];
    som = som.split('.')[0];
    alert('Hey 1');
    fileName.value = som;
    alert('Hey 2');
}; </script>

“Hey 1” alert is displayed and it’s alright.
“Hey 2” is actually not displayed!
fileName is both the name and id of the input for the file’s name, I DID try using document.getElementById(‘fileName’).value = … but with no luck.

Declaration of fileName:

<input type="text" runat="server" id="fileName" name="fileName" />

The javascript is located in the code under this input. The uploadImage input (which is type of file) is above this input. (Yes, the event is called and som gets the value I want it to have)

*I am trying to change the value of an input:text element. I will try the var thing.

THANK YOU IF YOU CAN HELP!

Answer 1

As far as I understand your problem, code below should work fine:

<script type="text/javascript">
function updateInput(val) {
    var som = val.split('\\')[val.split('\\').length - 1];
    som = som.split('.')[0];
    alert('Hey 1');
    document.getElementById('<%=fileName.ClientID %>').value = som;
    alert('Hey 2');
}; </script>

Because of runat="server", id of an element in browser will be different from one you see in your .aspx file. Id of HTML element will be something like CotentPlaceholder1_fileName, so document.getElementById('fileName') will not find it and document.getElementById('fileName').value = son; will throw an error.

The same problem with fileName.value = som; – as far as I understand, you are trying to use feature of IE (not sure if it is IE only feature, I just never use it but remember that there is something like that) which creates variables in global namespace using IDs of elements. ID is different from fileName, so variable name is different also.

To get an id of an runat="server" element like it will be in browser, you can use .ClientID property of server side object.

Also, you should use var to define a variable inside a function scope. Like var som = val.split('\\')[val.split('\\').length - 1];. This way it will not be visible in global scope (outside of updateInput function). Otherwise you may potentially get problems with it in future