如何在用户填写表单时显示数据？

Question

我正在努力做什么

我正在寻找一种在用户填写字段时显示用户输入的方法

到目前为止我尝试过的事情

我可以在第一个示例中轻松执行此操作，即如果用户填写第一个字段，则会显示该字段，如果他填写第二个下拉菜单，则接下来会显示所选值

$("#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>

我遇到的问题

问题是我有很多字段和下拉菜单。所以我找到了一种连接代码的方法，这是我的第二个例子，但这里的问题是所有内容都同时显示。

 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>

所以我正在寻找使用第二个选项，这是一种仅在用户填写字段或从下拉菜单中选择选项时才显示用户输入的方法。 这是一个语法问题，我不知道在哪里以及如何放置条件：“如果变量包含数据，则显示它”

Answer 1

尝试这个解决方案，我希望它能解决您的问题

 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>