jQuery script doesn't work in Wordpress

Question

I know this problem has been asked alot of times but I just can't get jQuery to work in Wordpress.

I have a form which is going to be used with some wp_ajax but before I get to this point I wanted to ensure that it could interact with jQuery.

The Form HTML is placed on the page and looks like this:

<div id = "content">
   <form action= "" method= "post" id= "hfwpform">
      <label for= "fname">First Name</label></br>    
      <input type= "text" name= "fname" id= "fname" required></br>
      <label for= "email">Email Address</label></br>   
      <input type= "email" name= "email" id= "email" required></br>
      <label for= "message">Your Message</label></br>    
      <textarea name= "message" id= "message"></textarea>
      <input type= "hidden" name= "action" value= "contact_form">
      <input type= "submit" value= "Send">
   </form>
   </br></br>
   <div id= "feedback">My Feedback</div>
   </br></br>
</div>

I have created a plugin which I'm using for my main php. In this plugin I've created the enqueue lines.

add_action( 'wp_enqueue_scripts', 'load_scripts');

function load_scripts() {

    if ( !is_admin() ) {

        wp_register_script('hftest', get_template_directory_uri() . '/js/hf_test.js', array('jquery'), '1.0', false );
        wp_enqueue_script('hftest');
    }
}

I've created a subfolder for my scripts called "js" and the script that should execute when I submit the form looks like this.

(function($) {
   $(document).ready(function() {
      $('#hfwpform').submit(function() {
         $response = "This is it!!!";
         alert("Submitted");
         $("#feedback").text($response);
      });
   });
 })( jQuery );

When I submit the form the page reloads clearing the input fields instead of changing the feedback text and displaying an Alert box.

What am I doing wrong ???

Regards Flemming

Have you checked to make sure the script is getting called? Any errors in your dev console? Also you're putting a document ready function inside of a shorthand document ready function and it's missing a $ at the beginning. — APAD1
– APAD1, Commented Apr 19, 2016 at 20:05
the shorthand document-ready function liberates the $ from wordpress, without it you jave to use the jQuery prefix. — admcfajn
– admcfajn, Commented Apr 19, 2016 at 20:11

jlemm45 · Accepted Answer · 2016-04-19 20:09:53Z

2

Your form is functioning properly. What you are missing is to specify in your js for the form to not execute via the default functionality.

Your code should look like this:

(function($) {
   $(document).ready(function() {
      $('#hfwpform').submit(function(e) {
         e.preventDefault(); //this is key
         $response = "This is it!!!";
         alert("Submitted");
         $("#feedback").text($response);
      });
   });
 })( jQuery );

answered Apr 19, 2016 at 20:09

jlemm45

1271 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Flemming Lemche Over a year ago

Your the man. That solved the problem with the reload. I actually had another problem that the path the the js folder couldn't be found. Wordpress was using the Theme path as starting point instead of the plugin path. So I had to change the path to somthng like this: ../../../plugins/my-plugin/js/hf_test.js

Flemming Lemche Over a year ago

Do you by chance know how to fix this in a better way.

jlemm45 Over a year ago

Awesome! Glad you got it. You could use $_SERVER["DOCUMENT_ROOT"] . "/and so on". Or maybe checkout codex.wordpress.org/Function_Reference/get_home_path.

Collectives™ on Stack Overflow

jQuery script doesn't work in Wordpress

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related