Concatenate select field value and text field value in to one text filed

Question

I have following form fields

<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
<option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">

How can I concatenate user inputs of text field and select field and insert that into the 3rd hidden field?

Ex: text field: HELLO select field : TEST.SITE value of full field should be : HELLO.TEST.SITE

Answer 1

You can use jQuery for the same:

  $(function(){
      $("#formId").on("submit", function(){ // change your formId here
      const domain = $("#domain").val();  //get domain value
      const sub = $("#sub").val();         // get sub value
      $("#full").val(domain + "." + sub); // join them with .
    })
 })

Answer 2

You can use this code, It will change the hidden field on Blur event of sub text field, You can change event according to your requirement,

<script src="https://code.jquery.com/jquery-3.4.1.min.js" ></script>

<input type="text" id="domain" name="domain">
<select id="sub" name="sub">
    <option value="TEST.SITE">TEST.SITE</option>
</select>
<input type="hidden" id="full" name="full">

<script>
$(document).ready(function(){
    $('#domain').on('blur', function(){
        var domain = $('#domain').val();
        var sub = $('#sub').val();

        var full = domain + '.' + sub;
        $('#full').val( full );
    });
});
</script>

Working example: https://paiza.io/projects/P13ImGFxhiOfcEaEn4RxTA