Jquery Ajax Form Submit with WordPress

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.

List of all Google Adsense, VueJS, AngularJS, PHP, Laravel Examples.

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

<form class="uploaded-form-data" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>">
	<input type="text" name="name">
	<input type="text" name="category">
	<input type="hidden" name="action" value="product_frm_action">
	<button>Send</button>
</form>
 

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

<form class="wordpress-ajax-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>">
	<input type="text" name="name">
	<input type="text" name="category">
	<input type="hidden" name="action" value="product_frm_action">
	<?php wp_nonce_field( 'product_frm_action_nonce', 'product_frm_nonce' ); ?>
	<button>Send</button>
</form>

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
}

Web Programming Tutorials Example with Demo

Read :

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.


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel MySQL Advanced Query Techniques with Example
  2.   PHP Tutorial
  3.   Laravel Get HTTP hostname with Example
  4.   Advanced Laravel 5.7 Eloquent Queries Builder
  5.   how to Connect pc internet on Android Mobile via USB Data Cable
  6.   Laravel 6.2 Dropzone Multiple Image Upload Tutorial
  7.   Send email via Gmail SMTP server in Laravel 7/6
  8.   woocommerce get attributes list by product id
  9.   Laravel 7 Create Seeder From Database Tutorial Example
  10.   Angular 8 Material Table Filter Sorting Paging