How to display data as the user fills the form?

Question

What I'm trying to do

I'm looking for a way to show user input as they fill in the fields

What I've tried so far

I can easily do this in my first example, i.e. if the user fills in the first field, it is displayed, and if he fills in the second drop-down menu, the selected value is displayed next

$("#mytext").on('input', function () {
   var mytext =  $(this).val();
   $("#result").find('.a').html(mytext+"?");
 });

 $("#myselect").on('change', function () {
    myselect  = $(this).find('option:selected').val();  
     $("#result").find('.b').html("utm_source="+myselect);
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>





<form id="fistform">
  <input id="mytext" type="text">

  <select id="myselect" style="" name="select[]" class="select">
     <option selected disabled="disabled">select your product</option>
   <option value="https://google.com/">My product</option>
   <option value="https://google.fr/">My second product</option>
  </select>
</form>

<div id="result">
 <span class="a"></span><span class="b"></span>
</div>

The problem I'm having

The problem is that I have a lot of field and drop-down menu. So I found a way to concatenate the code, this is my second example, but the problem here is that everything is showing at once.

 function onChange(){
      var mysecondtext = $('#mysecondtext').val();
      var mysecondselect = $('#mysecondselect option:selected').val();
    
    const value = mysecondtext + '?' + 'utm_source=' + mysecondselect
  
  $('#secondresult').html(value);
}

$('#secondform select').on('change',onChange);
$('#secondform input').on('input', onChange);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<form id="secondform">
<input id="mysecondtext" type="text">

<select id="mysecondselect" style="" name="select[]" class="select">
    <option selected disabled="disabled">select your product</option>
     <option value="https://google.com/">My product</option>
     <option value="https://google.fr/">My second product</option>
</select>
</form>

<div id="secondresult">

</div>

So I'm looking using the second option, a way to display user input only if he fills in the field or selects an option from the drop down menu(s). It's a syntax problem, I don't know where and how to place the condition : "if the variable contains data, display it"

Answer 1

try this solution i hope it will solve your problem

 function onChange(){
      var mysecondtext = $('#mysecondtext').val();
      var mysecondselect = $('#mysecondselect option:selected').val();
    
    var value = '';

    if(mysecondtext != ''){
      value += mysecondtext + '?';
    }

    if(mysecondselect != 'select your product'){
      value += 'utm_source=' + mysecondselect;
    }
  
  $('#secondresult').html(value);
}

$('#secondform select').on('change',onChange);
$('#secondform input').on('input', onChange);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


<form id="secondform">
<input id="mysecondtext" type="text">

<select id="mysecondselect" style="" name="select[]" class="select">
    <option selected disabled="disabled">select your product</option>
     <option value="https://google.com/">My product</option>
     <option value="https://google.fr/">My second product</option>
</select>
</form>

<div id="secondresult">

</div>