如何将简单的查询字符串jQuery脚本添加到WordPress

Question

I'm trying to add the ability to populate fields dynamically via query strings in WordPress. I've created dm_email.js containing the following:

    jQuery(function( $ ){
    
    //grab the entire query string
    var query = document.location.search.replace('?', '');
    
    //extract each field/value pair
    query = query.split('&');
    
    //run through each pair
    for (var i = 0; i < query.length; i++) {
    
    //split up the field/value pair into an array
      var field = query[i].split("=");
      
    //target the field and assign its value
      $("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]);
    
    } 
    });

and placed this in mytheme/js/dm_email.js

In my functions.php I've add the following:

add_action( 'wp_enqueue_scripts', 'dm_query_string' );
    function dm_query_string() {
    wp_enqueue_script(
        'dm_query',
        get_template_directory_uri() . '/js/dm_email.js', 
        array('jquery') 
    );
    }

But the expected functionality keeps failing. If I add the following to wp_head() I get the expected functionality but of course I also get a lot of issues with other scripts/plugins:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
    
    //grab the entire query string
    var query = document.location.search.replace('?', '');
    
    //extract each field/value pair
    query = query.split('&');
    
    //run through each pair
    for (var i = 0; i < query.length; i++) {
    
      //split up the field/value pair into an array
      var field = query[i].split("=");
      
      //target the field and assign its value
      $("input[name='" + field[0] + "'], select[name='" + field[0] + "']").val(field[1]);
    
    }
  });
</script>

I'm at a loss as to where I've gone wrong with either the js or functions.php any help or guidance greatly appreciated.

</div>

Answer 1

Try to place your script into footer and not to head. You can do the followig:

First be sure you enqueued jQuery.

Changes in functions.php:

wp_enqueue_script(
    'dm_query',
    get_template_directory_uri() . '/js/dm_email.js', 
    array('jquery'),
    '1.0.0',
    true
);

Changes in Your js:

(function($){ /* Your Code */ })(jQuery);