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.

Also Read :  PHP Laravel 5.7 Get IP Address Example

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 :

Also Read :  Laravel 5.8 get current url with parameters

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.

Leave a Reply

avatar
  Subscribe  
Notify of