0

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

2 Answers 2

0

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

2
  • removed it but still getting 404 error
    – pythonDON
    Jan 26, 2021 at 15:09
  • Now I looked closer to your code, don't use wp_head to provide the ajaxurl, use wp_localize_script() link
    – moped
    Jan 27, 2021 at 8:01
0

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’}

1
  • i did that but im still getting 404 error
    – pythonDON
    Jan 26, 2021 at 15:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.