Wordpress Submit a form using AJAX - php

Question

I created a Wordpress plugin to allow my client to create events with the ability to rsvp and pay for an event. I'm confused as to where certain code needs to be placed and how to submit a form to a function that resides within the plugin folder functions file.
At the moment it returns a blank alert.
I am displaying this form on a single event's page:
<div id="rsvpContent">
<form id="Attendevent" action="">
<input id="attend" name="attend" type="checkbox" value="yes" /><label for="attent">Yes, I plan to attend.</label>
</form>
Then, I placed this into the general header.php file:
$("#attend").click(function(){
var form = $("#Attendevent").serialize();
$.ajax({
type:'POST',
data:{"action":"Attending","data": form },
url: "<?php bloginfo('url'); ?>/wp-admin/admin-ajax.php",
beforeSend: function(){
alert(form);
},
success: function(data) {
alert(data);
}
});
});
Then, I placed this function into the main functions page within the plugin folder:
function eventAttent() {
$wpdb->show_errors();
if($_POST['attend'] == 'yes') {
$wpdb->insert('wp_event_attendants',
array( 'event_id' => get_the_ID(),'user_id' => $current_user->ID));
echo $wpdb->print_error();
}
}
add_action('wp_ajax_Attending', 'eventAttend');
add_action('wp_ajax_nopriv_Attending', 'eventAttend');
How can this function be called when a user clicks the 'Attending' checkbox?

Answer 1

This link is a very good source for ajaxifying your theme.
Put this code into functions.php in your child theme.
// enqueue your custom js
function my_js_method() {
// for jquery ui
wp_enqueue_style( 'jqueryUI_style', get_stylesheet_directory_uri() . '/customCSS/jquery-ui.css' );
wp_enqueue_script(
'handleFormAjax-script',
get_stylesheet_directory_uri() . '/handleFormAjax.js',
array( 'jquery' )
);
// add the appropriate hook
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'handleFormAjax-script', 'MyAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
// AJAX handler snippet
function myHandlerMethod(){
if (is_admin())
echo "woow working like a charm";
die();
}
//add the hooks for your handler function
add_action('wp_ajax_myHandlerMethod', 'myHandlerMethod');
// for users who are not logged in
add_action('wp_ajax_nopriv_myHandlerMethod', 'myHandlerMethod');
In addition to that your form should look like this.
<form id="assetForm" action= "/wp-admin/admin-ajax.php" method="post">
<input type="hidden" name="action" value="myFunction"/>
<button id="sbmBtn">SUBMIT </button>
</form>
and lastly, you js function should address the handler function that you defined in functions.php
var data = jQuery("#myForm :input").serializeArray();
jQuery.post(jQuery("#myForm").attr("action"),data, function(info) {
// success code ;
});

Answer 2

try with this code. this is my tested code. working fine with me .. but it will not process FILE upload.
HTML
<form id="form_name" name="form_name" >
<span id='errfrmMsg' style='margin:0 auto;'></span>
//form attributes just as input boxe.
<input type="hidden" name="action" value="anyName" />
<input id="submit_button" onclick="submit_form();" type="button" value="Send" />
</form>
j Query
function submit_form()
{
jQuery.post(the_ajax_anyName.ajaxurl_anyName,
jQuery("#form_name").serialize(),
function(response_from_the_action_function){
jQuery("#errfrmMsg").html(response_from_the_action_function).css({"display":"block"});
}
);
}
Php code in functions.php
wp_register_script("ajax-anyName", get_bloginfo('template_directory')."/js/custom_js.js", array( "jquery"));
wp_enqueue_script('ajax-anyName');
wp_localize_script("ajax-anyName","the_ajax_anyName", array("ajaxurl_anyName" => admin_url("admin-ajax.php")));
// add actions
add_action( "wp_ajax_anyName", "ajax_action_anyName" );
add_action( "wp_ajax_nopriv_anyName", "ajax_action_anyName" );
function ajax_action_anyName(){
//Form processing code in PHP
}