On form submission hide the form diva and send an email using 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 = "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>";
       }
    }

?>

What error you are getting ? are you getting post data in "fromemail.php" file ? — Rakhi Prajapati, Mar 16 '17 at 05:51
I am not getting an error I am not able to call the file fromemail.php. How to do that using script — Akhil, Mar 16 '17 at 05:52
Please check the code below. It is still not working. Now I am getting not response @RakhiPrajapati — Akhil, Mar 16 '17 at 06:22

score 0 · Answer 1 · answered Mar 16 '17 at 05:57

0

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

answered Mar 16 '17 at 05:57

Rakhi Prajapati

880
1
12
24

I am getting an error in console: Failed to load resource: net::ERR_CONNECTION_TIMED_OUT – Akhil Mar 16 '17 at 06:06
Error is because of not getting file. Try giving path using base url of your project. var base_url = "http://localhost/projectname/". then url in ajax as base_url+"filename.php" – Rakhi Prajapati Mar 16 '17 at 06:11
This is the error I am getting: POST http://www.3ding.in/spots/fromemail.php net::ERR_CONNECTION_TIMED_OUT send @ jquery-2.2.1.min.js:4 ajax @ jquery-2.2.1.min.js:4 (anonymous) @ designkari:477 dispatch @ jquery-2.2.1.min.js:3 r.handle @ jquery-2.2.1.min.js:3 – Akhil Mar 16 '17 at 06:30

score 0 · Answer 2 · answered Mar 16 '17 at 06:22

0

@Rakhi..

Is this correct??

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


        }






    });



    });


});

answered Mar 16 '17 at 06:22

Akhil

19
1
9

Yes, its correct, for finding **base_url** use :- "" and try to give the correct path of file(fromemail.php). – Rakhi Prajapati Mar 18 '17 at 04:24
Please refer this link for more understanding (http://stackoverflow.com/questions/15300470/jquery-ajax-form-using-mail-php-script-sends-email-but-post-data-from-html-fo) – Rakhi Prajapati Mar 18 '17 at 04:29

On form submission hide the form diva and send an email using jQuery

2 Answers2