Wordpress contact form - ajax, wp_mail - php

Question

I'm tring to create a simple contact form using jquery to validate the form and ajax to pass it to php and WP wp_mail to send it.
I have a simple form like this.
<form role="form">
<div class="form-group">
<label class="">Name</label>
<input type="text" id="name" class="form-control" name" />
</div>
<div class="form-group">
<label class="">Email</label>
<input type="text" id="email" class="form-control" name="email" />
</div>
<?php wp_nonce_field( 'atex_php', 'atex_nonce' ); ?>
<button class="submit">Submit</button>
</form>
jQuery to validate the inputs and send to php
//IsEmail and fadeOut functions aren't shown
$atj(function(){
$atj('submit').click(function(e) {
e.preventDefault();
if(verfiyFields()) {
$atj.post({
data : {
action : "request",
firstName : $atj("#name").val(),
email : $atj("#email").val(),
}
})
}
});
})
//Verfiy
function verfiyFields() {
var flag = true;
var name = $atj('#name');
var email = $atj('#email');
if(name.val().indexOf(' ') === -1 ){
name.parent().prepend('<p class="form-error">Please enter name, first space last</p>');
fadeOut();
flag = false;
}
if(!IsEmail(email.val())){
email.parent().prepend('<p class="form-error">Please enter valid email address</p>');
fadeOut();
flag = false;
}
return flag;
}
And the php in the function.php
add_action( 'wp_ajax_nopriv_request', 'my_action_callback' );
function my_action_callback() {
if ( isset( $_POST['atex_nonce'] ) && wp_verify_nonce( $_POST['atex_nonce'], 'atex_php' ) ) {
$name = $_POST['firstName'];
$email = $_POST['email'];
$send_to = me#test.co.uk;
$subject = 'Request from'. $name;
$success = wp_mail($send_to, $subject, $message);
if($success){
return true;
}else{
return false;
}
}
}
I'm getting a 404 Not Found for [object%20Object] in the Network tab of chrome dev tools when the submit is clicked.
How can I get this to work

Answer 1

you need to enqueue some scripts:
Let's say you validation script is in a file called validationForm.js
function ajaxScript(){
$params = array(
'ajaxurl' => admin_url('admin-ajax.php')
);
wp_enqueue_script( 'validation', get_template_directory_uri() . '/js/validationForm.js', array(), '', true );
wp_localize_script( 'validation', 'ajax_object', $params );
}
add_action( 'wp_enqueue_scripts', 'ajaxScript' );
Also you need to add this action hook:
add_action('wp_ajax_amc_form_fr', 'my_action_callback');
Then, use ajax jquery function to send info:
var dataString = $(form).serialize();
jQuery.ajax({
type: "POST",
url: ajax_object.ajaxurl,
dataType : 'JSON',
data : 'action=jQuery.ajax({
type: "POST",
url: ajax_object.ajaxurl,
dataType : 'JSON',
data : 'action=amc_form_fr&'+dataString,&'+dataString,
success: function(response) {
console.log(response);
// your code
}
If im not wrong, i think that is. And check this link