Los Angeles

WordPress submit comment with ajax without plugin

Step 1 – HTML Form

<form method="post" id="commentform">
	<div class="field">
		<label for="author">Name</label>
		<input type="text" name="author" id="author" class="form-control">
	</div>
	<div class="field">
		<label for="email">Email (will be displayed)</label>
		<input type="email" name="email" id="email" class="form-control">
	</div>
	<div class="field">
		<label for="comment">What is your question?</label>
		<textarea class="form-control style" name="comment" id="comment"></textarea>
	</div>
	<p>You will be emailed a response in typically 1 business day. By submitting this question you agree to our <a href="#">privacy policy.</a></p>
	<div class="check-holder">
		<label for="chck">
			<input type="checkbox" id="chck">
			<span class="fake-check"></span>
			Sign up to receive smart credit card tips & current offers
		</label>
	</div>
	<input type="submit" value="Submit your question" id="ccQuestionFormSubmit">
	<input type="hidden" name="post_id" value="<?php echo get_the_ID(); ?>">
	<input type="hidden" name="action" value="cc_ajax_comment">
</form>

Step 2 – Javascript

<script>var ajaxurl="<?php echo admin_url("admin-ajax.php")?>";</script>
<script>
    $(document).ready(function () {
        $("#ccQuestionFormSubmit").click(function (event) {
            event.preventDefault();
            jQuery("#commentform").validate({
                rules: {
                    // simple rule, converted to {required:true}
                    author: "required",
                    comment: "required",
                    // compound rule
                    email: {
                        required: true,
                        email: true
                    }
                },
                messages: {
                    author: "Please specify your name.",
                    comment: "Please specify your message.",
                    email: "Please enter valid email."
                }
            });
            if (jQuery("#commentform").valid())
            {
                var commentform = $('#commentform');
                var formdata = commentform.serialize();
                $.ajax({
                    type: "POST",

                    url: ajaxurl,
                    data: formdata,
                    cache: false,
                    before: function (data) {

                    },
                    success: function (data1) {
                        console.log("asdf");
                    }
                });
            }
            
        });
    });
</script>

Step 3 – PHP functions.php

function enqueue_jquery_validate() {
  wp_enqueue_script('contact_us_validate', 'https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js');   
}
add_action( 'wp_enqueue_scripts', 'enqueue_jquery_validate' );

add_action( 'wp_ajax_cc_ajax_comment', 'cc_ajax_comment' );
add_action( 'wp_ajax_cc_ajax_comment', 'cc_ajax_comment' ); 

function cc_ajax_comment(){
    $data = array(
    'comment_post_ID' => $_POST["post_id"],
    'comment_author' => $_POST["author"],
    'comment_author_email' => $_POST["email"],
    'comment_content' => $_POST["comment"],
    'comment_approved' => 0
);

wp_insert_comment($data); 

}

Los Angeles

Redirect next page after submitted contact form 7

This script code display on the page only show when the page or post id is 2.


[php]
<?php if(get_the_id()==2):?>
<script>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘http://efaculty.in/’;
}, false );
</script>
<?php endif; ?>
[/php]