在表单提交中隐藏表单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); 


     } 






    }); 



    }); 


});