HTML + values out of two text forms - html

Question

I need a way to get the values out of two text forms/fields and put them together in one hidden textbox.
e.g.
Password 1: water
Password 2: 12561
The hidden password-form should now contain "water12561"
Why do I need this?
I have a OTRS-Login with OTP(one time password) and want to authenticate the user with the OTP and the password which is stored in the mysql-DB/LDAP. The normal way is, that the user has to type in both values in one filed but this isn't a good way in my opinion. Because of this reason I want to create two field and set the password together in one field to submit this to the perl-script.
btw - there is no PHP installed on the machine.

Answer 1

Here is a quick snippet that works via JavaScript. I made the password field visible so you can see it working. You'll simply need to make the password field hidden to meet your requirements.
document.getElementById("button").addEventListener("click", function(){
concatFields();
});
function concatFields()
{
var val1 = document.getElementById("input1").value;
var val2 = document.getElementById("input2").value;
var password = val1 + val2;
document.getElementById("password").value = password;
}
<div>
<label>input 1</label>
<input id="input1" type="text" placeholder="add value here">
</div>
<div>
<label>input 2</label>
<input id="input2" type="text" placeholder="add value here">
</div>
<div>
<label>password</label>
<input id="password" type="password" placeholder="do not add value here">
</div>
<div>
<input id="button" type="button" value="Concat field 1 and 2, then insert into field 3">
</div>