Admin-ajax.php 404 error

Question

im trying to submit the following form but it just wont work:

HTML:

<div class= "container">
    
<div class="row">
<div class= "col-md-10 mx-auto text-center">
    <div  style="display:none;" id="success">
        <p class="pb-1 pt-1" style="color:white;background-color:#008000;font-size:20px;font-family:poppins;border-radius:3px;border:3px solid #008000;">Your Request Has Been Sent!</p>
    </div>
    
   
    
<form method="POST" id="request_quote" action="request_quote_ajax">

<div class="form-group ">
      <input type="hidden" name="action" value="request_quote_ajax">
    <select placeholder="Product Or Service Of
    Interest" class="form-control form-control-lg" id="product" type="text" name="product" required>
     <option value="">Product Or Service Of
    Interest</option>
     <option value="Solar PV System">Solar PV System</option>
     <option value="Solar Water Heater">Solar Water Heater</option>
     <option value="Solar Pool Heating">Solar Pool Heating</option>
     <option value="Servicing">Servicing</option>
    </select>
     <div class="form-group">
        <div class="form-row">
         <div class="col-md-6">
             <input type="text" class="form-control form-control-lg" id="fullname" name="fullname" placeholder="Full Name" required>
             </div>
              <div class="col-md-6">
              <input type="text" class="form-control form-control-lg" id="email" name="email"  placeholder="Email" required>
    </div>
    </div>
    </div>
    
    
    <div class="form-group">
   
  
  <div class="form-group">
     <div class="form-row">
         <div class="col-md-6">
        <input type="text" class="form-control form-control-lg" name="phonenumber1" id="phonenumber1" placeholder="Phonenumber 1" required>
    </div>
        

         <div class="col-md-6">
    <input type="text" class="form-control form-control-lg" name="phonenumber2" id="phonenumber2" placeholder="Phonenumber 2" >
        </div>
        </div>
</div>
  
  <div class="form-group">
    <div class="form-row">
             <div class="col-md-6">
    <input type="text" class="form-control form-control-lg " id="exampleInputPassword1" placeholder="Street Address" name="address" required>
            </div>
     <div class="col-md-6">
    <input type="text" class="form-control form-control-lg" id="parish" name="parish" placeholder="Parish" required>
  </div>
  </div>
  </div>
  
  <div class="form-group">
    <textarea type="textarea" class="form-control form-control-lg" name="_usermessage" id="_usermessage" placeholder="Your Message" required></textarea>
  </div>
  
  <button type="submit" name="submit" class="btn btn-primary">GO SOLAR</button>
</div>

</div>
</form>

Javascript:

<script>
$(document).ready(
    $('#request_quote').submit(function(e){
    e.preventDefault();
    jQuery.post({ 
        
         url: ajaxurl,
         data: { $(this).serialize() },
         
        die();
         })
       })

</script>

I used the following script to make ajax url available:

    add_action('wp_head', 'myplugin_ajaxurl');
       function myplugin_ajaxurl() 
               {
                 echo '<script type="text/javascript">
             var ajaxurl = "' . admin_url('admin-ajax.php') . '";
                    </script>';
               }
   

My php function is as follows:

    add_action('wp_ajax_nopriv_request_quote_ajax', 'request_quote_ajax');
    add_action('wp_ajax_request_quote_ajax', 'request_quote_ajax');


function request_quote_ajax()
{

    // if the submit button is clicked, send the email
    if (isset($_POST['submit'])) {
        //user posted variables
        $name = sanitize_text_field($_POST['fullname']);
        $email = sanitize_email($_POST['email']);
        $product = sanitize_text_field($_POST['product']);
        $phonenumber1 =  sanitize_text_field($_POST['phonenumber1']);
        $phonenumber2 =   sanitize_text_field($_POST['phonenumber2']);
        $address =  sanitize_text_field($_POST['address']);
        $parish =  sanitize_text_field($_POST['parish']);
        $_usermessage = esc_textarea($_POST['_usermessage']);

        //combined all fields inputs
        $message = "Request For Quote : {$name} \n {$product} \n {$phonenumber1} \n {$phonenumber2} \n {$address} \n {$parish} \n {$_usermessage} ";

        //php mailer variables
        
        $third_email = "[email protected]";
        $to = $third_email;
        $subject = "Quotation Request From {$name}";
        
        wp_mail($to, $subject, strip_tags($message));
        //$headers = 'From: <[email protected]>' . "\r\n" .'Reply-To: ' . $email . "\r\n";
    }
     
    else{ do_action( 'wp_mail_failed', WP_Error, $error ); }
 
  
    wp_die();
}


       

Everytime i try submitting the form i get a 404 error. I have tried all solutions on similar posts but none have worked please help me

Answer 1

Your action attribute in the form tag is wrong. You can remove it, your jQuery submit function will do the work.

Answer 2

when trying to hit an action on wp functions you always have to pass the action name on the post data. On JavaScript file change to:

data: { $(this).serialize(), action: ‘request_quote_ajax’}