What's the best way to send an input's data to a hidden input?

Question

I have a form on a Website, and then another form inside of a Bootstrap modal.

The main form has certain fields e.g "Neck, Chest, Waist" while the form inside of the modal has only one e-mail field.

I'm planning to add some "hidden" inputs into the secondary form named "chest, waist" etc and I would like the main form field's value to be passed into the secondary form's hidden inputs as that's the one which is actually going to be submitted.

Is it possible without javascript? If not, I'd prefer some jQuery solution as it must be something pretty minor but I just can't figure it out.

Answer 1

Just copy the values of the form to the form with hidden inputs when it is submitted. Copying on keyup is unnecessary.

<form id="form1">
Input
<input type="text" id="input"/>
<button type="submit">Submit</button>
</form>
<form id="form2">
<input type="text" id="input2"/>
</form>
<script>
document.getElementById("form1").addEventListener("submit", (e)=>{
  e.preventDefault();
  document.getElementById("input2").value = document.getElementById("input").value;
  document.getElementById("form2").submit();
});
</script>