CODEWITHSUNDEEP
phpjqueryhtmlajax
Jerad
Jerad

Reputation: 207

Getting the alert message after submit the form using ajax

I have written the code for email send through ajax. After clicking the button email is sending successfully but I didn't get the alert message why is that, what issues in my code please help me to find out the error.

This is my Ajax code

<script>

    $(function () {
        $("#myForm").submit(function (evenr) {
            event.preventDefault(e);
            var form_data = $(this).serialize();
            $.ajax({
                url:'mail.php',
                method:'POST',
                data:{data},
                success:function(data){
                    alert(data);
                    $("#success_message").attr("style", "display: none");
                }
            });
        });
    });

</script>

this is my html form

<div class="col-lg-5 col-md-6 home-about-left">
    <form class="form-area contact-form text-right" id="myForm">
     <h4 style="text-align: left;color: #ffffff;font-size: 24px;">Get a free consultation</h4></br>
     <div class="row">

         <div class="col-lg-12 form-group">
             <div class="alert alert-success" id="success" style="display: none;">
                 <strong>Success!</strong> Indicates a successful or positive action.
             </div>
         </div>

      <div class="col-lg-12 form-group">
       <input name="name" placeholder="Name" id="formClass" class="common-input mb-20 form-control" required="" type="text">
       <input name="phone" placeholder="Phone Number" id="formClass" class="common-input mb-20 form-control" required="" type="text">
       <input name="email" placeholder="Email" id="formClass" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="common-input mb-20 form-control" required="" type="email">
       <input name="service" placeholder="Type of Pest control services" id="formClass" class="common-input mb-20 form-control" required="" type="text">
      </div>
      <div class="col-lg-12">
       <!--<button class="genric-btn primary" style="float: left;">Send Message</button>-->
      <input name="submit" type="submit" class="genric-btn primary" style="float: left;" value="Send Message">
      </div>
     </div>
    </form>
   </div>

and I attached my PHP code also

if((isset($_POST['name']))&&(isset($_POST['phone'])&&$_POST['email']&&$_POST['service'])) {
    $to = '[email protected]';
    $subject = "{$_POST['name']} " . ' Requested the Pest Control Services';
    $message = '
        <html>
            <head>
                <title>Pest Control Services</title>
            </head>
            <body>
                <p><b>Name:</b> ' . $_POST['name'] . '</p>
                <p><b>Phone:</b> ' . $_POST['phone'] . '</p>                        
                <p><b>Email:</b> ' . $_POST['email'] . '</p>                        
                <p><b>Services Type:</b> ' . $_POST['service'] . '</p>                        
            </body>
        </html>';
    $headers = "Content-type: text/html; charset=utf-8 \r\n";
    $headers .= "From:{$_POST['name']} {$_POST['email']}\r\n";
    mail($to, $subject, $message, $headers);
}

Upvotes: 0

Views: 1640

Answers (2)

Dhaval Gol
Dhaval Gol

Reputation: 160

<script>

    $(function () {
        $("#myForm").submit(function (evenr) {
            event.preventDefault(e);
            var form_data = $(this).serialize();
            $.ajax({
                url:'mail.php',
                method:'POST',
                data:{data},
                success:function(data){
                    alert(data);
                    if($.trim(data))
                     {
                     alert("Mail was sent !")
                    $("#success_message").attr("style", "display: none");
                     }else{ alert("Mail was not sent !")}
                }
            });
        });
    });

</script>

Ajax File changes: 

if(isset($_POST['name']) && isset($_POST['phone']) && isset($_POST['email']) && isset($_POST['service'])) {

        $to = '[email protected]';
        $subject = "{$_POST['name']} " . ' Requested the Pest Control Services';
        $message = '
            <html>
                <head>
                    <title>Pest Control Services</title>
                </head>
                <body>
                    <p><b>Name:</b> ' . $_POST['name'] . '</p>
                    <p><b>Phone:</b> ' . $_POST['phone'] . '</p>                        
                    <p><b>Email:</b> ' . $_POST['email'] . '</p>                        
                    <p><b>Services Type:</b> ' . $_POST['service'] . '</p>                        
                </body>
            </html>';
        $headers = "Content-type: text/html; charset=utf-8 \r\n";
        $headers .= "From:{$_POST['name']} {$_POST['email']}\r\n";
        if(mail($to, $subject, $message, $headers)){
          echo "1"; exit;
        else{
          echo "0"; exit;
        }
    }

Upvotes: 1

swapy
swapy

Reputation: 126

Try something like this.. 

if((isset($_POST['name']))&&(isset($_POST['phone'])&&$_POST['email']&&$_POST['service'])) {
        $to = '[email protected]';
        $subject = "{$_POST['name']} " . ' Requested the Pest Control Services';
        $message = '
            <html>
                <head>
                    <title>Pest Control Services</title>
                </head>
                <body>
                    <p><b>Name:</b> ' . $_POST['name'] . '</p>
                    <p><b>Phone:</b> ' . $_POST['phone'] . '</p>                        
                    <p><b>Email:</b> ' . $_POST['email'] . '</p>                        
                    <p><b>Services Type:</b> ' . $_POST['service'] . '</p>                        
                </body>
            </html>';
        $headers = "Content-type: text/html; charset=utf-8 \r\n";
        $headers .= "From:{$_POST['name']} {$_POST['email']}\r\n";
       if(mail($to, $subject, $message, $headers))
          {
          echo "<script>alert('Mail was sent !');</script>";
          }
          else
          {
          echo "<script>alert('Mail was not sent. Please try again later');</script>";
          }
    }

Upvotes: 0

Related Questions