在表单提交上隐藏表单diva并使用jQuery发送电子邮件

Question

My objective is to send the form data as an email using php and the form div should get replaced by another div. I have done hiding the div part using jquery but not able to send and email. I have also written the code to send email but my issue is how to call the file which has email sending code.

My form code:

<form method="post" id="formsub">
   <div id="form">
       <div class="form-group">
           <input type="text" name="name" class="form-control" id="name" placeholder="Name" required>
       </div>

       <div class="form-group">
           <input type="text" name="email" class="form-control" id="email" placeholder="Email" required>
       </div>

       <div class="form-group">
          <input type="text" name="phone" class="form-control" id="phone" placeholder="Phone Number" required>
        </div>

       <div class="form-group">
          <input type="button" id="addbut" name="submit" value="Submit" class="form-control">
       </div>
    </div>
  </form>

My code to hide the div and tried form submission script:

<script>
    $(document).ready(function() {
       $("#addbut").on('click', function() {
         $.ajax({
          type: "POST",
          url: "fromemail.php",
          data: $(form).serialize(),
          success: function(){
           $("#form").hide();
           $("#address").show();
          }
        });
       });
    }); 
 </script>

My php email sending code:

<?php
    if($_POST['submit']){
        $to = "[e-mail]"; // this is your Email address
        $from = $_POST['email']; // this is the sender's Email address
        $name = $_POST['name'];
        $phone = $_POST['phone'];
        $subject = "Spots Contact";
        $message = $first_name . ", with " . $phone . "has enquired for the service";

        $headers = "From:" . $from;

        mail($to,$subject,$message,$headers);

       if(mail($to,$subject,$message,$headers))
       {
            echo "<script>alert('We will contact you shortly');</script>";
       }
    }

?>

Answer 1

Give file name in form action attribute :

<form id="formsub" method="post" action="fromemail.php">

and do ajax code like this :

   $(document).ready(function(){
    var form=$("#formsub");
    $("#addbut").click(function(){
    $.ajax({
        type:"POST",
        url:form.attr("action"),
        data:$("#formsub").serialize(),
        success: function(response){
            console.log(response);  
        }
    });
});
});