2

I'm building a little form to let users update their contact information outside of the vanilla Wordpress user management systems. I plan to use a simple CRUD setup and throw in some sanitation. I've got the initial insert/create function built using the $wpdb functions and the form does write to the database correctly. However, my Javascript isn't getting called when I submit my form. The Javascript file doesn't capture the submit event and the form just POSTs the data straight to the PHP processor file. I'm scratching my head here.

Run down of the issue, play-by-play: 1. Form submits, but user is redirected to a page with the JSON encoded data in an array. 2. The Javascript file that contains my error processing and Ajax calls is never touched. 3. The Javascript file does not capture the submit event. 4. The form is still written to the DB, I assume because the POST method is being called on the PHP file in the form action.

NOTE: I am including the .js file using wp_enqueue_script in my functions file, but will most likely change this to be included only when the page with this form is loaded, to cut down on load times. I don't think loading the javascript file this way should change anything.

PHP Processing:

<?php
# DB CRUD commands for updating the table for alumni contact info
/* wordpress db globals, require wp-load to bring in useful functions */
$parse_uri = explode( 'wp-content', $_SERVER['SCRIPT_FILENAME'] );
require_once( $parse_uri[0] . 'wp-load.php' );
global $wpdb;

$errors         = array();      // array to hold validation errors
$data           = array();      // array to pass back data

/*Ensure no fields are empty, and if they are, return $errors array encoded in JSON */
    if (empty($_POST['first_name']))
        $errors['first_name'] = 'First name is required.';

        if (empty($_POST['last_name']))
        $errors['last_name'] = 'Last name is required.';

    if (empty($_POST['email']))
        $errors['email'] = 'Email is required.';

    if (empty($_POST['phone']))
        $errors['phone'] = 'A phone number is required.';

    if (empty($_POST['address']))
        $errors['address'] = 'A mailing address is required.';

    if (empty($_POST['city']))
        $errors['city'] = 'Please enter the city for your mailing address.';

    if (empty($_POST['zip']))
        $errors['zip'] = 'Your zip code is required.';  

    if (empty($_POST['state']))
        $errors['state'] = 'Please select your state.';

// return a response ===========================================================

    // if there are any errors in our errors array, return a success boolean of false
    if ( ! empty($errors)) {

        // if there are items in our errors array, return those errors
        $data['success'] = false;
        $data['errors']  = $errors;
    } else {

        // if there are no errors process our form, then return a message

            /* Set the proper table name to a variable */
                        $table_name = "wp_alumni"; 
                        /* Use insert function to write the data to the table 
                        * Called on form submit when the user adds their contact info
                        * to the Alumni database using the on-page form.
                        * button name = submit is used to check 'if isset' 
                        * and then perform the update function
                        */
                        if (isset($_POST['create'])) {
                                $wpdb->insert(
                                    $table_name, array(
                                        'first_name'    => $_POST['first_name'],
                                        'last_name' => $_POST['last_name'],
                                        'address'   => $_POST['address'],
                                        'address2' => $_POST['address2'],
                                        'city'  => $_POST['city'],
                                        'state' => $_POST['state'],
                                        'zip'   => $_POST['zip'],
                                        'phone' => $_POST['phone'],
                                        'email' => $_POST['email'],
                                        'time' => current_time('mysql', 1)
                                        )
                                    );
                            }

        // show a message of success and provide a true success variable
        $data['success'] = true;
        $data['message'] = 'Success!';
    }

    // return all our data to an AJAX call
    echo json_encode($data);
?>

The Form/HTML:

<form method="POST" action="<?php echo plugins_url( 'alumni/alumni_update.php' ); ?>" name="alumni-update" id="alumni-update">
    <div id="alumni-form-column">
        <li>
        <span class="alumni-span">First Name</span><br />
            <input id="first_name" type="text" name="first_name" class="alumni-input" />
        </li>
        <li>
        <span class="alumni-span"> Last Name</span><br />
            <input id="last_name" type="text" name="last_name" class="alumni-input" />
        </li>
        <li>
        <span class="alumni-span">Street Address</span><br />
            <input id="address" type="text" name="address" class="alumni-input" />
        </li>
            <li>
        <span class="alumni-span">Apt, Unit, Ste #, etc</span><br />
            <input id="address2" type="text" name="address2" class="alumni-address-2" cols="1" />
        </li>
    </div>
    <div id="alumni-form-column">
        <li>
        <span class="alumni-span">City</span><br />
            <input id="city" type="text" name="city" class="alumni-input" />
        </li>
        <li>
        <span class="alumni-span">State</span><br />
                <select id="state" type="text" name="state" class="alumni-input">
                    <option value="AL">Alabama</option>
                    <option value="AK">Alaska</option>
                    <option value="AZ">Arizona</option>
                    <option value="AR">Arkansas</option>
                    <option value="CA">California</option>
                    <option value="CO">Colorado</option>
                    <option value="CT">Connecticut</option>
                    <option value="DE">Delaware</option>
                    <option value="DC">District Of Columbia</option>
                    <option value="FL">Florida</option>
                    <option value="GA">Georgia</option>
                    <option value="HI">Hawaii</option>
                    <option value="ID">Idaho</option>
                    <option value="IL">Illinois</option>
                    <option value="IN">Indiana</option>
                    <option value="IA">Iowa</option>
                    <option value="KS">Kansas</option>
                    <option value="KY">Kentucky</option>
                    <option value="LA">Louisiana</option>
                    <option value="ME">Maine</option>
                    <option value="MD">Maryland</option>
                    <option value="MA">Massachusetts</option>
                    <option value="MI">Michigan</option>
                    <option value="MN">Minnesota</option>
                    <option value="MS">Mississippi</option>
                    <option value="MO">Missouri</option>
                    <option value="MT">Montana</option>
                    <option value="NE">Nebraska</option>
                    <option value="NV">Nevada</option>
                    <option value="NH">New Hampshire</option>
                    <option value="NJ">New Jersey</option>
                    <option value="NM">New Mexico</option>
                    <option value="NY">New York</option>
                    <option value="NC">North Carolina</option>
                    <option value="ND">North Dakota</option>
                    <option value="OH">Ohio</option>
                    <option value="OK">Oklahoma</option>
                    <option value="OR">Oregon</option>
                    <option value="PA">Pennsylvania</option>
                    <option value="RI">Rhode Island</option>
                    <option value="SC">South Carolina</option>
                    <option value="SD">South Dakota</option>
                    <option value="TN">Tennessee</option>
                    <option value="TX">Texas</option>
                    <option value="UT">Utah</option>
                    <option value="VT">Vermont</option>
                    <option value="VA">Virginia</option>
                    <option value="WA">Washington</option>
                    <option value="WV">West Virginia</option>
                    <option value="WI">Wisconsin</option>
                    <option value="WY">Wyoming</option>
                </select>   
        </li>
        <li>
        <span class="alumni-span">Zip</span><br />
            <input id="zip" type="text" name="zip" class="alumni-input" maxlength="5" />
        </li>
        <li>
        <span class="alumni-span">Phone</span><br />
            <input id="phone" type="text" name="phone" class="alumni-input" maxlength="10" onfocus="if (this.value == 'Hint text..') this.value=''" value="Hint text.." onblur="if (this.value == '') this.value='Digits only: 5458881234'"/>
        </li>
        <li>
        <span class="alumni-span">Email</span><br />
            <input id="email" type="text" name="email" class="alumni-input" />
        </li>
    <li>    
        <button class="alumni-button" type="submit" name="create">Submit</button>
    </li>
        </div>
</form>

Javascript

// .js document to capture the Submit event from the form and send back errors asychronously
$(document).ready(function() {
    // process the form
    $('form').submit(function(event) {
            event.preventDefault();
            $('.form-group').removeClass('has-error'); // remove the error class
            $('.help-block').remove(); // remove the error text
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'email'             : $('input[name=email]').val(),
            'address'              : $('input[name=address]').val(),
            'phone'             : $('input[name=phone]').val(),
            'city'              : $('input[name=city]').val(),
            'state'             : $('input[name=state]').val(),
            'first_name'              : $('input[name=first_name]').val(),
            'last_name'             : $('input[name=last_name').val(),
            'zip'              : $('input[name=zip]').val()         
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'http://localhost/wordpress/wp-content/plugins/alumni/alumni_update.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode          : true
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
                if ( ! data.success) {

            // handle errors for fist name ---------------
            if (data.errors.first_name) {
                $('#first_name').addClass('has-error'); // add the error class to show red input
                $('#first_name').append('<div class="help-block">' + data.errors.first_name + '</div>'); // add the actual error message under our input
            }

            // handle errors for last name ---------------
            if (data.errors.last_name) {
                $('#last_name').addClass('has-error'); // add the error class to show red input
                $('#last_name').append('<div class="help-block">' + data.errors.last_name + '</div>'); // add the actual error message under our input
            }

            // handle errors for city---------------
            if (data.errors.city) {
                $('#city').addClass('has-error'); // add the error class to show red input
                $('#city').append('<div class="help-block">' + data.errors.city + '</div>'); // add the actual error message under our input
            }

            // handle errors for last name ---------------
            if (data.errors.state) {
                $('#state').addClass('has-error'); // add the error class to show red input
                $('#state').append('<div class="help-block">' + data.errors.state + '</div>'); // add the actual error message under our input
            }

            // handle errors for phone ---------------
            if (data.errors.phone) {
                $('#phone').addClass('has-error'); // add the error class to show red input
                $('#phone').append('<div class="help-block">' + data.errors.phone + '</div>'); // add the actual error message under our input
            }

            // handle errors for address ---------------
            if (data.errors.address) {
                $('#address').addClass('has-error'); // add the error class to show red input
                $('#address').append('<div class="help-block">' + data.errors.address + '</div>'); // add the actual error message under our input
            }

            // handle errors for zip ---------------
            if (data.errors.zip) {
                $('#zip').addClass('has-error'); // add the error class to show red input
                $('#zip').append('<div class="help-block">' + data.errors.zip + '</div>'); // add the actual error message under our input
            }

            // handle errors for email ---------------
            if (data.errors.email) {
                $('#email').addClass('has-error'); // add the error class to show red input
                $('#email').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
            }

        } else {

            // ALL GOOD! just show the success message!
            $('form').append('<div class="alert alert-success">' + data.message + '</div>');

            // usually after form submission, you'll want to redirect
            // window.location = '/thank-you'; // redirect a user to another page
            alert('success'); // for now we'll just alert the user

        }
    });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});
6
  • 1
    Never load WordPress yourself. Don't post to your own scripts, post to the official AJAX handler. May 11, 2015 at 13:57
  • @TheDeadMedic How would I safely access my DB tables for CRUD stuff? Ideally, I will write this to function outside the standard WordPress taxonomies and such. Thanks for the help.
    – Jordan W.
    May 11, 2015 at 14:02
  • The same you are now. The main difference is that WordPress fires your code, instead of you loading WordPress (check out the linked answer). May 11, 2015 at 14:38
  • @TheDeadMedic I read through the linked article, but it isn't 100% clear to me. Maybe because I'm a bad programmer. Anyway, I can see what's happening but I'm not sure how I would achieve that with the code I have here. I'm writing this as a plugin, so I will not have access to a user's functions.php, where most of the tutorials on WP_AJAX suggest storing the code for using the admin-ajax.php class. It just isn't clear to me how I would do what you're suggesting. I have managed to get this code working. I had errors in my Javascript and investigated them using the console + debug tool.
    – Jordan W.
    May 11, 2015 at 14:56
  • You don't need access to functions.php, you have your plugin to place the code in! Let me explain in an answer (though it might not fully address the issue). May 11, 2015 at 14:57

1 Answer 1

2

If you're releasing this as a plugin, you absolutely must use the AJAX API. It's super easy:

/**
 * Handle the request and return the result.
 */
function alumni_process_request() {
    global $wpdb;

    // All your processing code from your original question, except for loading WordPress!

    return $data;
}

/**
 * AJAX handler for the "alumni" action.
 */
function alumni_ajax_handler() {
    global $wpdb;

    $data = alumni_process_request();

    header( 'Content-Type: application/json; charset=' . get_bloginfo( 'charset' ) );
    echo json_encode( $data );
    exit;
}

add_action( 'wp_ajax_nopriv_alumni', 'alumni_ajax_handler' );
add_action( 'wp_ajax_alumni',        'alumni_ajax_handler' );

That's the basics. Now we need to make sure we are correctly loading our JavaScript, ensuring we'll have jQuery loaded, and a global JavaScript variable that will hold the URL for the WordPress AJAX handler:

function alumni_enqueue_script() {
    wp_enqueue_script(
        'alumni',
        plugins_url( 'path/to/script.js', __FILE__ ), // URL path relative to the folder of the PHP script this code is placed in 
        array( 'jquery' ) // Requires jQuery, make sure it's loaded first
    );

    wp_localize_script(
        'alumni', // Name of script, from above
        'alumni', // Name of JavaScript variable
        array(
            'ajaxUrl' => admin_url( 'admin-ajax.php' ),
        )
    );
}

add_action( 'wp_enqueue_scripts', 'alumni_enqueue_script' );

And now for the JavaScript:

!function( $ ) { // Self-executing function closure, will ensure $ is jQuery - might be running in noConflict mode

    $( document ).ready(
        function() {
            $( "#alumni-update" ).submit( // Don't bind to all forms, just ours
                function ( event ) {
                    event.preventDefault();

                    $('.form-group').removeClass('has-error'); // remove the error class
                    $('.help-block').remove(); // remove the error text

                    var data = $( this ).serializeArray(); // Will automatically grab all form fields and data

                    data.push({
                        name : "create",
                        value: "1"                      
                    });

                    data.push({
                        name : "action",
                        value: "alumni" // This parameter needs to match the wp_ajax_* hook.                        
                    });

                    $.post(
                        alumni.ajaxUrl, // Use our JavaScript variable "alumni" we defined in wp_localize_script()
                        data, // POST data
                        function ( data ) {
                            // Your form handling
                        }                   
                    );

                }
            )
        }
    );

}( jQuery );

The above is assuming a plugin structure like so:

plugin-folder/plugin.php
 - PHP code
plugin-folder/path/to/script.js
 - JavaScript
1
  • Incredible work. Thank you for this, stranger. You've saved me much grief and agony.
    – Jordan W.
    May 11, 2015 at 15:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.