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.

Read Also:  how to get last inserted record in laravel?

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

Read Also:  AngularJs http post Request To PHP json

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 :

Read Also:  Laravel 6 get Session ID Easily

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. Read Also:  Eloquent Batch update multiple records using Laravel
  2. Read Also:  CheckBox Show Hide Div using Angular Example
  3. Read Also:  Laravel 6 JQuery Ajax Post Request Example
  4. Read Also:  How to Make Async Requests in PHP
  5. Read Also:  ng-model Directive using Angular Example
  6. Read Also:  Create Dynamic Sitemap Using PHP with Mysql
  7. Read Also:  ng-table Filtering Sorting Paging using Angular Example
  8. Read Also:  Eloquent Batch update multiple records using Laravel
  9. Read Also:  How to Make Async Requests in PHP
  10. Read Also:  AngularJs http post Request To PHP json
CLOSEX