jqueryinputfield

How to display data as the user fills the form?


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"


Solution

  • 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>