Jquery Ajax Form Submit with WordPress

Today, We want to share with you Setup Ajax Form Submit with WordPress.In this post we will show you how to send form data in wordpress ajax, hear for WordPress Submit A Form Without Page Refresh using jQuery we will give you demo and example for implement.In this post, we will learn about Jquery Ajax Post Example For Submitting AJAX Forms in WordPress with an example.

Jquery Ajax Form Submit with WordPress

There are the Following The simple About Ajax Form Submit in PHP Full Information With Example and source code.

As I will cover this Post with live Working example to develop Submit Form Using Ajax, PHP and jQuery, so the wordpress ajax form submit frontend for this example is following below.

HTML Part(Sending Data With AJAX)

Make HTML Form For Submit Data With jquery AJAX

	
	
	
	Send

 

jQuery Part

simple create a js file

jQuery(document).ready(function($) {
	
	$('.uploaded-form-data').on('submit', function(e) {
		e.preventDefault();
 
		var $form = $(this);
 
		$.post($form.attr('action'), $form.serialize(), function(data) {
			alert('This is data returned from the server ' + data);
		}, 'json');
	});
 
});

WordPress Handling AJAX Request

Setup WordPress core Function For Handling jquery AJAX Request without page refresh

add_action( 'wp_ajax_product_frm_action', 'product_frm_action' );
add_action( 'wp_ajax_nopriv_product_frm_action', 'product_frm_action' );
function product_frm_action() {
    $response = array(
    	'error' => false,
    );
 
    if (trim($_POST['category']) == '') {
    	$response['error'] = true;
    	$response['error_message'] = 'Your Category is required';
 
    	// Exit here, for not processing further because of the error
    	exit(json_encode($response));
    }
 
    exit(json_encode($response));
}
 

WordPress Security With Nonce jQuery Ajax Form Submit

	
	
	
	
	Send

WordPress server-side verification

add_action( 'wp_ajax_product_frm_action', 'product_frm_action' );
add_action( 'wp_ajax_nopriv_product_frm_action', 'product_frm_action' );
function product_frm_action() {
    if ( 
        ! isset( $_POST['product_frm_nonce'] ) 
        || ! wp_verify_nonce( $_POST['product_frm_nonce'], 'custom_action_nonce') 
    ) {
 
        exit('The main HTML Products form is not valid');
 
    }
 
    // ... Some Onthor task Processing further
}

Submitting a form with ajax in WordPress

Submitting a form with Ajax in WordPress involves several steps. Here’s an example of how to do it:

In your WordPress plugin or theme, enqueue the jQuery library and your custom JavaScript file which contains the Ajax code.

function my_enqueue_scripts() {
    wp_enqueue_script('jquery');
    wp_enqueue_script('my_custom_js', get_template_directory_uri() . '/js/my-custom.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

Add a hidden field to your form with the admin-ajax.php URL as the value.

Create a PHP function to handle the form submission and send a JSON response. This function should be registered as an Ajax action using the wp_ajax_nopriv_ prefix.

add_action('wp_ajax_nopriv_my_form_action', 'my_form_action');
add_action('wp_ajax_my_form_action', 'my_form_action');

function my_form_action() {
    check_ajax_referer( 'my_form_nonce', 'security' );
    $name = sanitize_text_field($_POST['name']);
    // Do something with the form data
    wp_send_json_success(array('message' => 'Form submitted successfully.'));
    wp_die();
}

In your custom JavaScript file, add an event listener to your form’s submit event, prevent the default form submission, and make an Ajax request to the PHP function.

jQuery(document).ready(function($) {
    $('#my-form').on('submit', function(event) {
        event.preventDefault();
        var form_data = $(this).serialize();
        $.ajax({
            url: ajaxurl,
            type: 'post',
            data: form_data,
            dataType: 'json',
            beforeSend: function() {
                // Show a loading spinner or disable the submit button
            },
            success: function(response) {
                // Handle the successful response
            },
            error: function(xhr, status, error) {
                // Handle the error response
            },
            complete: function() {
                // Hide the loading spinner or re-enable the submit button
            }
        });
    });
});

In this example, we’re using the serialize() method to serialize the form data into a string that can be sent in the Ajax request. We’re also using the ajaxurl global variable provided by WordPress as the URL to send the request to. The beforeSend, success, error, and complete functions are optional and can be used to handle the various stages of the Ajax request. Once the request is successful, you can use the response data to update the DOM or display a message to the user.

Web Programming Tutorials Example with Demo

Read :

• Jobs
• Make Money
• Programming

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Simple Ajax Form Submit with WordPress.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.