Ajaxifying php page result data

Question

I want to send mail by user to domain@host.com after filling contact us form. On successful sending or fail sending in both situation Message is shown in new page, I want to show these messages on my contact us page after submitting.

html

    <form  id="form"class="form" action="sendEmail.php" method="POST">

    <p class="name">
        <input type="text" name="name" id="name" placeholder="John Doe" />
        <label for="name">Name</label>
    </p>

    <p class="email">
        <input type="text" name="email" id="email" placeholder="mail@example.com" />
        <label for="email">Email</label>
    </p>

    <p class="subject">
        <input type="text" name="subject" id="subject" placeholder="www.example.com" />
        <label for="subject">subject</label>
    </p>        

    <p class="text">
        <textarea name="message" id="comment" placeholder="Write something to us" /></textarea>
    </p>
              <div id="complete" class="complete hide">
        <h3>Thank you</h3>
        <p>We will be in contact with you soon!</p>
      </div>
    <p class="submit">
        <input type="submit" value="Send" />
    </p>




</form>

Here is my sendEmail.php code

        <?php
    $toAddress = 'domain@host.com'; //eamil will be sent to this account...
    $EmailSentBy= $_POST['email'];
    $userEmail = $_POST['name'];
    $title = $_POST['subject'];
    $message = $_POST['message'];
    //****************************************************************


    require 'PHPMailer-5.2.23/PHPMailerAutoload.php';

    //Create a new PHPMailer instance
    $mail = new PHPMailer;

    //Tell PHPMailer to use SMTP
    $mail -> isSMTP();

    //Enable SMTP debugging
    // 0 = off (for production use)
    // 1 = client messages
    // 2 = client and server messages
    $mail -> SMTPDebug = 0;

    //Ask for HTML-friendly debug output
    $mail -> Debugoutput = 'html';

    //Set the hostname of the mail server
    $mail -> Host = 'smtp.gmail.com';///
    // use
    // $mail->Host = gethostbyname('smtp.gmail.com');
    // if your network does not support SMTP over IPv6

    //Set the SMTP port number - 587 for authenticated TLS, a.k.a. RFC4409 SMTP submission
    $mail -> Port = 587;

    //Set the encryption system to use - ssl (deprecated) or tls
    $mail -> SMTPSecure = 'tls';

    //Whether to use SMTP authentication
    $mail -> SMTPAuth = true;

    //Username to use for SMTP authentication - use full email address for gmail
    $mail -> Username = "domain@host.com";//email address from which it is send to other // 

    //Password to use for SMTP authentication
    $mail -> Password = "ooovxxazwdbxmcgn";//password of website email account

    //Set who the message is to be sent from
    $mail -> setFrom($toAddress, "Contact Us Page");

    //Set an alternative reply-to address
    $mail -> addReplyTo($userEmail, "UserName here");

    //Set who the message is to be sent to
    $mail -> addAddress($toAddress, "Mr/Mrs.");//receiver

    //Set the subject line
    $mail -> Subject = $title;


    $msg = 'Message';

    //$mail->msgHTML(file_get_contents('contents.html'), dirname(__FILE__));
    $mail -> msgHTML($msg);

    //Replace the plain text body with one created manually
    $mail -> AltBody = 'This is an auto generated email from oric.uob.edu.pk';

    //Attach an image file
    //$mail->addAttachment('images/phpmailer_mini.png');


    //************************************************************************
    if (!$mail -> send()) {

   echo json_encode(array('status' => false, 'msg' => 'There was a problem while sending Email' . $mailer -> ErrorInfo));

die();

}else{

echo json_encode(array('status' => TRUE, 'msg' => 'Successfully Approved'));
die();
    }
    ?>

Jscript

    $(function() {
  var form = $('#form');


  $(form).submit(function(event) {

    event.preventDefault();
    var formData = $(form).serialize();

    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: formData
    })
    .done(function(response) {
      response=$("#msg").html("<i>Thank you </i>")

    })
    .fail(function(data) {

    });
  })
});

I am unable to find out whats going wrong, any kind of help would be very appreciated. thanks in advance.

Answer 1

You are not getting the result data from sendEmail.php in Jscript properly because you are using Status and msg in your echo json_encode(array('status' => false, 'msg' => 'There was a problem while sending Email' . $mailer -> ErrorInfo)); You should remove method=post in your form tag using both might get you in trouble create Jscript function and using onClick attribute in your submint button.

<input type="submit" onClick="myfun()"/>

Jscript

function myfun()
{
        var data = $("#loginForm").serialize();// form ki id 

    $.ajax({
    method : "POST",
    url : "process/login.php",  //process file
    dataType : "json",
    //data : data,
    }).done(function(data) {
    status = data["status"];


    if (status == true | status=="true") {
    msg1 = data["msg"];
    msg = msg1;
    alert(msg);

    } else {

    msg1 = data["msg"];
    // alert(msg);
    msg = msg1;
    var Error_message = '<div class="alert alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>  <strong> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i></strong>  ' + msg + '</div>';
    response.html(Error_message);

    }

    }).fail(function(x, y, z) {
    var msg = x.responseText;
    alert(msg);

    response.html(x + y + z);
    });
}

That will do the trick.

Answer 2

I think you should chose between submitting your form data by POST (using <form method="POST"> or by ajax using $.ajax()) but you should not use both.

Currently, your Javascript is bypassed : when you click on the submit button, the browser is requesting sendEmail.php and waits for a response without calling your JavaScript.

If you want the rendered sendEmail.php displayed on the same page, you should change

<input type="submit" value="Send" />

to

<button id="sendmail">Send</button>

and then select it with Jquery with something like

$('#sendmail').on('click', function(e) { /* your AJAX goes here */ });

Moreover, you should be aware that everyone who is able to generate a POST request will be able to abuse your PHP script and send arbitrary emails using your mail account