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

<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 5.8 Set file folder storage permissions
  2.   How to Open URL in New Tab using Vue JS
  3.   Laravel 5.8 create custom 404 Error page
  4.   Laravel Pagination Example Tutorial
  5.   Vue.js Tutorial for beginners
  6.   Download Remote File via PHP CURL
  7.   Global Config variable In Laravel 6 Example
  8.   Dynamically Change Page Title Keywords Meta Description In AngularJS
  9.   Nodejs Login and Registration with PHP MySQL and SQLite Example
  10.   Vuejs Adding Removing Toggling Classes Example