Create Live Preview Of Form Input

I'm trying to re-create something similar to Create live preview of form inputs I am trying to create a live preview of values entered into various form inputs (text areas, radio b

Solution 1:

You can make something like this in the vanilla javascript:

const paragraph = document.querySelector('p');
const input = document.querySelector('.input');

input.addEventListener('input', (event) => {
  paragraph.innerHTML = event.target.value;
});

<inputclass='input'type='text'><p></p>

Solution 2:

//it is necessary to check that jquery //<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>//was called earlier
<script>
  //and put in document ready
  $( document ).ready(function() {
    $(".import").keyup(function() {
      var $this = $(this);
      $('.' + $this.attr("id") + '').html($this.val());
    });
  });        
</script> 

Solution 3:

Wordpress templates that include jQuery usually use jQuery.noConflict() so try wrapping what you have shown in jQuery(function($){ /* your code */}) – @charlietfl

This now works, thank you!

<script>jQuery(function($){
    $( document ).ready(function() {
        $(".import").keyup(function() {
        var $this = $(this);
        $("." + $this.attr("id") + "").html($this.val());
        });
     });
});
</script>