How to use a variable created by a javascript function in a hidden field?

Question

I'm using a feature from formmail.php which allows me to use a hidden input that will rename a file uploaded by the user. This way I can keep the value of the real company name while removing illegal characters from the composed file name.

I've written a function that would do the proper replacements and assign the new value to a string variable, so I could use at the hidden input. Like this:

<input type="text" id="CompanyName" name="CompanyName" size="60" maxlength="40" onchange="clean(this.value)" required>

<script type="text/javascript">
 cleanName = "";  // variable outside the function meant to be Global
 function clean()
 {
 cleanName = document.getElementById("CompanyName").value.replace(/[/\\/'"*&%$]/g, "");
 }
 </script>

Nevertheless, when I try to use that "cleanName" variable, its value appears empty:

<input type="hidden" name="file_names" value="Proof=State.%2D%.cleanName.%'-Paymnt'%.%2D%.Proof" />

The file is uploaded as "NY--Paymnt-FileName.pdf".

How can I make this work?

Answer 1

You have just put the literal cleanName in an attribute value, not the value of the variable carrying that name.

You could write to the value attribute of the hidden input.

For that you should give your hidden input an id, like id=file_names (same as name).

Then change the script to this (forget the global variable):

function clean() {
     var cleanName = document.getElementById("CompanyName").value
                             .replace(/[/\\/'"*&%$]/g, "");
     cleanName = "Proof=State.%2D%." + cleanName + ".%'-Paymnt'%.%2D%.Proof";
     console.log(cleanName);
     document.getElementById("file_names").value = cleanName
 }

The HTML for the hidden input can go without a value:

<input type="hidden" name="file_names" id="file_names">

NB: I have no idea what you are going to do with that value; it looks strange, but I expect you know what you are doing on the server side.

Answer 2

When you call the function clean(), you pass in a variable "this.value" but the function itself does not take any argument. Either introduce an argument or stop calling clean() with an argument.

Answer 3

Since I found out what was going on, I'm adding this information for those who might have the same problem using formmail.php.

When using the facility of renaming a file that will be uploaded, you really need to define the hidden input "file_names" value as the parameter formmail.php will use. Such as:

<input type="hidden" name="file_names" value="Proof=State.%2D%.cleanName.%'-Paymnt'%.%2D%.Proof" />

The problem is when a user types illegal characters such as a backslash, that can't be used in a filename.

So, in my example, to strip those illegal characters from a variable and create another variable I can use elsewhere through a javascript function, I just defined a new hidden input, like:

<input type="hidden" name="cleanName" id="cleanName" />

Then I called the function when the user typed the value that will be modified:

<input type="text" id="CompanyName" name="CompanyName" size="60" maxlength="40" onchange="clean()" required>

This way I can have two values from an unique user input with the javascript function, like this (assignement splited):

<script type="text/javascript">
 function clean()
 {
 var newName = document.getElementById("CompanyName").value.replace(/[/\\/'"*&%$]/g, "");
 document.getElementById("cleanName").value = newName;
 }
</script>

I hope this can be helpful to someone else.