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

Question

我的目标是使用 php 将表单数据作为电子邮件发送，并且表单 div 应该被另一个 div 替换。我已经使用 jquery 隐藏了 div 部分，但无法发送和发送电子邮件。我还编写了发送电子邮件的代码，但我的问题是如何调用具有电子邮件发送代码的文件。

我的表单代码：

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

我隐藏 div 的代码并尝试了表单提交脚本：

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

我的php邮件发送代码：

<?php
    if($_POST['submit']){
        $to = "akhil@redd.xyz"; // 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

在表单动作属性中给出文件名：

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

并像这样执行 ajax 代码：

   $(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);  
        }
    });
});
});

Answer 2

@Rakhi..

这样对吗？？

<script type="text/javascript" src="assets/js/jquery-2.2.1.min.js"></script>
<script>


    $(document).ready(function() {
    var form=$("#formsub");
    var base_url = "www.3ding.in/spots/";
    $("#addbut").on('click', function() {

    $("#form").hide();
        $("#address").show();

    $.ajax({
        type: "POST",
        url: base_url + "fromemail.php",
        data: $("#formsub").serialize(),
        success: function(response){
        alert(1);
        console.log(response);


        }






    });



    });


});