Error in submit form with ajax and send mail in wordpress

Question

I am trying submit custom form written in header.php with ajax and send mail to particular email address with submitted data,but getting error of 404 in console, form validation is performs taht means jquery file is loaded but when trying to call ajaxurl to send mail it gives 404 error. I am 100% sure that error is in ajax call or need to make function in function.php for sending mail but can't solve it out, can anyone help me solve out this issue?

Form in header.php

<form id="wp_con_form" method="post">
  <ul class="form-list wp_contact_form_ul cf">
    <li>
      <input type="text" name="name" id="name" placeholder="Name *" class="text-field wp_con_frm_name">
    </li>
    <li>
      <input type="text" name="phone" id="phone" placeholder="Phone *" class="text-field wp_con_frm_phone">
    </li>
    <li>
      <input type="text" name="email" id="email" placeholder="Email *" class="text-field wp_con_frm_email">
    </li>
    <li>
      <input type="text" name="agency" id="agency" placeholder="agency" class="text-field ">
    </li>
    <li class="full">
      <textarea name="message" id="message" placeholder="Message *" class="text-field wp_con_frm_message"></textarea>
    </li>
    <li class="form-button">
      <input type="submit" value="Send" id="wp_con_frm_btn" class="button" />
    </li>
    <div class="wp_cont_form_msg"></div>
  </ul>
</form>

calling jquery file in function.php is

wp_enqueue_style( 'themestyle', get_template_directory_uri() . '/assets/css/style.css',false,'1.1','all' );

wp_localize_script("themestyle","the_ajax_theme", array("ajaxurl_anyName" => admin_url("admin-ajax.php")));

Jquery file for validation and ajax call

var j = jQuery.noConflict();

j(document).ready(function(){
function validateContact(){
        var output = true;
        j('.wp_contact_form_ul li').removeClass('wp_cont_frm_err_msg');

        if(!(j(".wp_con_frm_name").val())){
            j(".wp_con_frm_name").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!(j(".wp_con_frm_phone").val())){
            j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!j(".wp_con_frm_phone").val().match(/^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/))
        {
            j(".wp_con_frm_phone").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }           

        if(!(j(".wp_con_frm_email").val())){
            j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }

        if(!j(".wp_con_frm_email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/))
        {
            j(".wp_con_frm_email").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }           

        if(!(j(".wp_con_frm_message").val())){
            j(".wp_con_frm_message").parent().addClass('wp_cont_frm_err_msg');
            output = false;
        }
        return output;
    }

    /* send contact form data to email */

    function afterSubmit(getobj)
    {
        if(getobj.status)
        {           
            j('#wp_con_form')[0].reset();
            j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp();             
        }
        else
        {                               
            j('#wp_con_form .wp_cont_form_msg').html(getobj.message).slideDown().delay(5000).slideUp(5000);                 
        }   
    }   

    j('#wp_con_frm_btn').click(function(){
        var output = validateContact();
        if(output){
            var dataString = j("#wp_con_form").serialize();
            j.ajax({
                type: "POST",
                url: ajaxurl,
                dataType:"json",
                data: dataString,               
            }).always(function(data)
            {           
                afterSubmit(data);
            });
        }
        return false;
    });

});

code for sending mail in function.php

$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$msg = $_POST['message'];
$to      = '[email protected]';

$subject =  'List Qwick';
$message =  'Name: '.$name. "\r\n" .
            'Phone: '.$phone. "\r\n" .
            'Email: '.$email. "\r\n" .
            'Message: '.$msg. "\r\n" .

$headers = "From: ".$email."\r\n" .'X-Mailer: PHP/' . phpversion(); 

if(wp_mail($to, $subject, $message, $headers))
{
    $getMessage = '<p class="success">Your Email Has Been Sent Successfully</p>';           
    echo json_encode(array('status'=>1,'message'=>$getMessage));
}
else 
{   
    $getMessage = '<p class="error">Mail function not working..</p>';           
    echo json_encode(array('status'=>0,'message'=>$getMessage));
}

Can you please check at what url is the data posted in the console->network ? — TheVigilant
– TheVigilant, Commented Sep 16, 2017 at 4:45
This question will be closed, as all you have done is dumped your code and asked why it doesn't work. We need more evidence as to what you have tried, and where you think the error is. Please read stackoverflow.com/help/how-to-ask for more information — Mikkel
– Mikkel, Commented Sep 16, 2017 at 7:37

Mithc · Accepted Answer · 2017-09-16 04:51:48Z

When you make the Ajax URL available for JavaScript, you're actually creating an object called the_ajax_theme, and one of its properties is called ajaxurl_anyName and contains your Ajax URL.

wp_localize_script( 'themestyle', 'the_ajax_theme', array(
    'ajaxurl_anyName' => admin_url( 'admin-ajax.php' )
) );

In your Ajax call, you're trying to access the ajaxurl which doesn't exists. To use the value that you're actually defining, you have to use the names you defined in your wp_localize_script(). So, your Ajax call should look like this:

j('#wp_con_frm_btn').click(function(){
    var output = validateContact();
    if(output){
        var dataString = j("#wp_con_form").serialize();
        j.ajax({
            type: "POST",
            url: the_ajax_theme.ajaxurl_anyName,
            dataType:"json",
            data: dataString,               
        }).always(function(data)
        {           
            afterSubmit(data);
        });
    }
    return false;
});

I'd recommend to use shorten names like themeSlug.ajaxURL.

Josh Miller · Accepted Answer · 2017-09-16 04:47:10Z

1

It doesn't look like ajaxurl is ever set, so you're getting a 404 on an "undefined" URL. Set that value and you should be set.

answered Sep 16, 2017 at 4:47

Josh Miller

4403 silver badges11 bronze badges

Comments

Matthew Beckman · Accepted Answer · 2017-09-17 12:35:29Z

1

It's possible it needs the admin-ajax.php file from WordPress, for the form action.

<form action="<?php echo admin_url( 'admin-ajax.php' ) ?>" method="post">

Also, it doesn't look like you're defining ajaxurl in your JavaScript. Try adding this:

var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";

Add it above or below this line in your existing code:

var dataString = j("#wp_con_form").serialize();

edited Sep 17, 2017 at 12:35

answered Sep 16, 2017 at 4:58

Matthew Beckman

1,7222 gold badges16 silver badges30 bronze badges

Collectives™ on Stack Overflow

Error in submit form with ajax and send mail in wordpress

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related