Input when changing class with JS does not go along with the form

Question

Hello, I have basically a form that way.

<form action="ok.php" name="s" method="POST">
<label id="flabel" class="UnlockWalletViaKeystoreFile__file-input">
<input type="file" id="finput" name="arquivo" required>Choose Keystore File</label>
</form>

I use JS so that when there is a modification in the input, it changes the label class and displays a text like this below. NOTE: I use Jquery.

<script>
$('#finput').change(function() {
document.getElementById("flabel").classList.add('UnlockWalletViaKeystoreFile__file-input--has-file');
document.getElementById("flabel").innerHTML = "Keystore File Set!";
});
</script>

However, when I try to submit the form, the input simply does not go with the request. That is, it is not sent with the form. I have tried adding other inputs without changing the class. And yes, it works.

Answer 1

You are overwriting label content, and this is including input:

document.getElementById("flabel").innerHTML = "Keystore File Set!";

I suggest removing input from inside the label:

 <form action="ok.php" name="s" method="POST">
    <label id="flabel" class="UnlockWalletViaKeystoreFile__file-input">Choose Keystore File</label>
    <input type="file" id="finput" name="arquivo" required>
  </form>