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

时间:2017-03-16 05:37:45

标签: javascript php jquery html forms

我的目标是使用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>";
       }
    }

?>

2 个答案:

答案 0 :(得分:0)

在表单操作属性中提供文件名:

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

答案 1 :(得分:0)

@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);


        }






    });



    });


});