Help with AJAX request

Question

I am creating an events plugin with a commenting section for each event. I am able to save each comment, but the problem I'm having now is that I am taken to admin-ajax.php which is blank. When the form is submitted, I want to stay on the same page and have results loaded. My code is below.

Form

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="comment_form">
    <textarea name="comment" id="comment" class="commentbox" rows="5" cols="120" required></textarea><br />
    <input type="hidden" name="eventid" id="eventid" value="<?php echo $id; ?>" />
    <input type="hidden" name="userid" id="userid" value="<?php echo $userid; ?>" />
    <input type="hidden" name="action" value="commentform">
    <button class="commentbtn">Add Comment</button>
</form>
<div id="response"></div> 

jQuery

<script>
jQuery(function($){
    $('#commentform').submit(function(){
        var commentform = $('#commentform');
        $.ajax({
            url:commentform.attr('action'),
            data:commentform.serialize(), // form data
            type:commentform.attr('method'), // POST
            beforeSend:function(xhr){           
                commentform.find('button').text('Processing...');
            },
            success:function(data){                 
                commentform.find('button').text('Apply filter');
                $('#response').html(data); // insert data
            }
        });
        return false;
    });
});
</script>

PHP Function

add_action('wp_ajax_commentform', 'comment_submit'); 
add_action('wp_ajax_nopriv_commentform', 'comment_submit'); 
function comment_submit() { 
    global $wpdb; 
    $eventid = $_POST["eventid"];
    $userid = $_POST["userid"]; 
    $comment = $_POST["comment"];
    date_default_timezone_set("America/New_York");
    $date = date('Y-m-d H:i:s');

    $inserttable = $wpdb->prefix . "event_comments";
    $data = array(
        'eventid' => $eventid,
        'userid' => $userid,
        'content' => $comment,
        'datesaved' => $date,
    );
    $wpdb->insert($inserttable, $data);

    die;
}

Answer 1

The code you provided is on the right track, but it's possible that the issue you're facing is related to WordPress's admin-ajax.php handling.

Here's how you can modify your code to make sure you stay on the same page after submitting the form:

1. Change the form action to the current page instead of admin-ajax.php.

Form:

<form action="<?php echo esc_url(admin_url('admin-ajax.php')); ?>" method="POST" id="comment_form">

2. Modify your JavaScript

<script>
jQuery(function($) {
    $('#comment_form').submit(function(e) {
        e.preventDefault(); // Prevent the default form submission

        var commentform = $(this);
        $.ajax({
            url: commentform.attr('action'),
            data: commentform.serialize(), // Form data
            type: commentform.attr('method'), // POST
            beforeSend: function(xhr) {
                commentform.find('button').text('Processing...');
            },
            success: function(data) {
                commentform.find('button').text('Add Comment');
                $('#response').html(data); // Insert data
            }
        });
    });
});
</script>

3. Make sure your JavaScript code is enqueued properly in your WordPress theme or plugin.

4. Ensure that the JavaScript code is loaded on the page where the form is present.

With these changes, your form should be submitted via AJAX, and the page will not be redirected to admin-ajax.php. Instead, the response will be loaded into the #response div on the same page.

Answer 2

I am taken to admin-ajax.php

That's what you are telling the form to do. Leave the action field blank and it will return to the same page.

Review the first User Note on this page for a proper example of how to set the ajax url field.

Or use this alternative approach.

Answer 3

I figured out the issue. I forgot to put event.preventDefault in the jQuery. It's all set now.