jQuery code that doesn`t work on WordPress

Question

I have a contact form that I submit via jQuery. It works perfectly on HTML/PHP/JS template, but when I use it on a WordPress it doesn't work fine.

The form is submited, but the jquery code inside the submit function is like doesn't exit. It doesn't retrieve any error but the loader doesn`t appear and jquery validation doesn't occurs:

<form method="post" action="<?php echo get_template_directory_uri() . '/templates/contact.php' ?>" name="contactform" id="contactform">
                <div class="col-sm-6">
                    <fieldset>
                        <input name="name" type="text" id="name" size="30" value="" placeholder="Name" />
                        <br />
                        <input name="email" type="text" id="email" size="30" value="" placeholder="Email" />
                        <br />
                        <input name="phone" type="text" id="phone" size="30" value="" placeholder="Phone" />
                        <br />
                    </fieldset>
                </div>
                <div class="col-sm-6">
                    <fieldset>
                        <textarea name="comments" cols="40" rows="8" id="comments" placeholder="Message"></textarea>
                        <button type="submit" class="btn btn-green-border btn-lg" id="submit" value="submit">Send Message</button>
                    </fieldset>
                </div>
            </form>

This is the jQuery:

// Send email 
    jQuery('#contactform').submit(function ($) {

        var action = $(this).attr('action');

        $("#message").slideUp(750, function () {
            $('#message').hide();

            $('#submit')
                .after('<img src="images/loader.gif" class="loader" />')
                .attr('disabled', 'disabled');

            $.post(action, {
                    name: $('#name').val(),
                    email: $('#email').val(),
                    phone: $('#phone').val(),
                    comments: $('#comments').val(),
                    verify: $('#verify').val()
                },
                function (data) {
                    document.getElementById('message').innerHTML = data;
                    $('#message').slideDown('slow');
                    $('#contactform img.loader').fadeOut('slow', function () {
                        $(this).remove()
                    });
                    $('#submit').removeAttr('disabled');
                    if (data.match('success') != null) $('#contactform').slideUp('slow');

                }
            );

        });

        return false;

    });

What can be the problem?

wrap it in document.ready

Ehsan Sajjad
– Ehsan Sajjad

2014-04-24 16:01:22 +00:00
Commented Apr 24, 2014 at 16:01 — Ehsan Sajjad
– Ehsan Sajjad, Commented Apr 24, 2014 at 16:01
I have already try this and doesn't work

ThemesCreator
– ThemesCreator

2014-04-24 16:08:26 +00:00
Commented Apr 24, 2014 at 16:08 — ThemesCreator
– ThemesCreator, Commented Apr 24, 2014 at 16:08

mack · Accepted Answer · 2014-04-24 16:02:52Z

1

    jQuery('#contactform').submit(function ($) {

Try removing the $ in function()

    jQuery('#contactform').submit(function () {

answered Apr 24, 2014 at 16:02

mack

1121 gold badge1 silver badge10 bronze badges

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

2 Comments

ThemesCreator Over a year ago

It works If I remove $ in function() and I wrap all in a documents ready. It need both to works! Thanks!

mack Over a year ago

Sorry. I didn't wrote the document ready part because I'm using my iPad. Glad it helped!

Reece · Accepted Answer · 2014-04-24 16:11:27Z

0

Your Wordpress installation could be using a version of jQuery that is incompatible with your code, try including a newer version

answered Apr 24, 2014 at 16:11

Reece

3963 silver badges11 bronze badges

Comments

Pieter Goosen · Accepted Answer · 2014-04-24 17:42:23Z

0

I believe you are using your jquery inline.

This is how I would do it (the correct way).

Create a file in your themes js folder and call it something like contactform-js.js
Copy your jquery code and paste it into this new file.
Register your new js file in your functions.php

This should sort some of your problems.

function register_contact_script() {
    wp_enqueue_script( 'contact-script', get_template_directory_uri() . '/js/contactform-js.js', array( 'jquery' ), '' , true );
}

add_action( 'wp_enqueue_scripts', 'register_contact_script' );

answered Apr 24, 2014 at 17:42

Pieter Goosen

9,9615 gold badges37 silver badges59 bronze badges

1 Comment

ThemesCreator Over a year ago

Thanks but I am actually doing it correctly (the way you have describe). I only have copy paste the needed code on the forum thread. ;)

Collectives™ on Stack Overflow

jQuery code that doesn`t work on WordPress

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related