Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – 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 buttons, dropdown menus, image uploads etc).

I’ve tried using the code snippet provided in the aforementioned post but it doesn’t seem to be working for me at all.

    /* script */

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

/* html output */
    <div id="preview">
          <div>Input 4: <span class="acf-field_60734728ddf2f"></span></div>
    </div>

/* form code */
    
    <div class="acf-field acf-field-text acf-field-60734728ddf2f is-required -r0" style="width: 50%; min-height: 98px;" data-name="actor_name_first" data-type="text" data-key="field_60734728ddf2f" data-required="1" data-width="50">
      <div class="acf-label">
        <label for="acf-field_60734728ddf2f">First Name <span class="acf-required">*</span></label></div>
      <div class="acf-input">
        <div class="acf-input-wrap"><input type="text" id="acf-field_60734728ddf2f" class="import import" name="acf[field_60734728ddf2f]" required="required"></div>
      </div>
    </div>

I am getting 1 error in the console:

TypeError: $ is not a function. (In '$(".import")', '$' is undefined)

This is a WordPress website running Elementor so I wondered if it was some sort of conflict and how I would fix that?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    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>

  2. 0

    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;
});
    <input class='input' type='text'>
<p></p>
    Login or Signup to reply.
  3. 0 
    //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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search