Question

HTML code:

<form class="contact_form" action="" name="contact_form">
<ul><li>
<input type="email" name="email" placeholder="Enter your email here" required />
</li><li>
<button class="submit" type="submit" style="float:left" onclick="form()"onsubmit="hide_form('container_subscribe')">Send</button>
</li></ul>
</form>

jQuery/Ajax code :

$(function() {  
  $(".submit").click(function() {  
    // validate and process form here  
    var field1 = $('input[name=email]').val();
    $.ajax({
        type: "POST",
        url: "mail.php?f1="+field1,
    });
  });  
});

PHP code :

<?php
$to      =  $_POST['field1'];
$subject =  'the subject';
$message =  'hello';
$headers =  'From: [e-mail]' . "\r\n" .
               'Reply-To: [e-mail]' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();
mail($to, $subject, $message, $headers);
?>

The php script is working if I run it alone with $_GET instead of $_POST (the mail is sent) so I think ajax can’t communicate with the php file.
I have no idea how to debug this.

Answer 1

One problem is you are calling the parameter f1 in your AJAX and field1 in your PHP. These need to match.

You also need to write your AJAX like this

$.ajax({
    type: "POST",
    data: "f1="+field1,
    url: "mail.php"
});