Using HTML, PHP and Ajax in the same file

Question

Good morning everyone as an attempt to re-learn web programming I am trying to make a simple mailing Form in a self contained html file, so no include, no outside reference using HTML php and Ajax. The point is to make a stand alone html that won't refresh when submitting the form.

I have the html form as follow:

<form class="form2" action="" method="POST" name="myForm" id="myForm">
<div class="formtitle">Inscrivez-vous à notre infolettre</div>
<div class="input">
<div class="inputtext">Nom: </div>
<div class="inputcontent">
<input type="text" name="name" id="name" />
</div>
</div>
<div class="input">
<div class="inputtext">Courriel: </div>
<div class="inputcontent">
<input type="text" name="email" id="email" />
</div>
</div>
<div class="buttons"> <span id="error" style="display:none; color:#F00">Some Error!Please Fill form Properly </span> <span id="success" style="display:none; color:#0C0">All the records are submitted!</span>
<input class="greybutton" type="submit" value="Inscrivez-moi" />
</div>
</form>

Then I have my Ajax listen for the submit button clic:

<script>
$(document).ready(function(){
$('#myForm').on('submit',function(e) {

$.ajax({
data:$(this).serialize(),
type:'POST',
success:function(data){
console.log(data);
$("#success").show().fadeOut(5000); //=== Show Success Message==
},
error:function(data){
$("#error").show().fadeOut(5000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
});
</script>

and finally I have the typical mail php code:

<?php $name = $_POST['name'];
$email = $_POST['email'];
$message = "Veuillez m'ajouter à votre newsletter";
$formcontent="From: $name \n Message: $message";
$recipient = "[email protected]";
$subject = "Newsletter";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
?>

For some reason it doesn't seem to ever reach the php as no mail are sent or success/error message. I doubled and tripled checked all the arguments that are passed and everything seem in order.

Thank you for your time and for sharing your knowledge!

Are you actually running a valid mail server on your server? With appropriate domains, etc? Your emails are going to take a long walk off a short pier if not. — Jared Smith
– Jared Smith, Commented Oct 24, 2014 at 16:14
Your ajax call isn't referencing your PHP form processor. It should contain a url to post against. In addition, your PHP probably should return a JSON response. In the current form, I think it will always hit the success callback even when PHP has an error. — Matt
– Matt, Commented Oct 24, 2014 at 16:14
@Jared Yes I am running everything on a valid web/mail server. — Jomathr
– Jomathr, Commented Oct 24, 2014 at 16:15

Xanarus · Accepted Answer · 2014-10-24 16:23:03Z

1

Put your PHP code in an other page as called : api_newsletter.php

Change your Php code by :

<?php 
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = "Veuillez m'ajouter à votre newsletter";
    $formcontent="From: $name \n Message: $message";
    $recipient = "[email protected]";
    $subject = "Newsletter";
    $mailheader = "From: $email \r\n";

    if(mail($recipient, $subject, $formcontent, $mailheader)){
        echo json_encode(array('success' => true)); 
    }else {
        echo json_encode(array('success' => false)); 
    }
?>

Then in your ajax code simply do :

<script>
$(document).ready(function(){

  $('#myForm').on('submit',function(e) {

    $.ajax({
        data:$(this).serialize(),
        type:'POST',
        url : '/api_newsletter.php',
        success:function(data){

            console.log(data);
            var rsp = $.parseJSON (data)

            if(rsp["success"] == true){

                $("#success").show().fadeOut(5000); //=== Show Success Message==

            }else {

                $("#error").show().fadeOut(5000); //===Show Error Message====

            } 
        },
        error:function(data){

                $("#error").show().fadeOut(5000); //===Show Error Message====

        }
    });

    e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===

  });

});
</script>

edited Oct 24, 2014 at 16:23

answered Oct 24, 2014 at 16:17

Xanarus

7771 gold badge7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jomathr Over a year ago

Tried it both in different files and in the same file using the URL:'', and they both work wonderfully! Thank you for your time and helping me understand where I was wrong!

Collectives™ on Stack Overflow

Using HTML, PHP and Ajax in the same file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related