mail.php not working (tutorial unclear)

Jordan Brooks asked 5 months ago

I am following a tutorial here for making a contact form with bootstrap. I can get it working up until the part that tells you how to get the form to submit without reloading by using ajax. At that point the guide becomes unclear of which code is exactly supposed to replaced and where the new code goes. Here is a link to the guide I am using and the section Im stuck at is 'Sending email without reloading page using AJAX':

https://mdbootstrap.com/components/bootstrap-contact-form/#ajax


Witold Tkaczyk commented 5 months ago

Did you try to download source file to make it clear?


I will try to make it clear

this code:
document.getElementById('status').innerHTML = "Sending...";

formData = {
    'name': $('input[name=name]').val(),
    'email': $('input[name=email]').val(),
    'subject': $('input[name=subject]').val(),
    'message': $('textarea[name=message]').val()
};

$.ajax({
    url : "mail.php",
    type: "POST",
    data : formData,
    success: function(data, textStatus, jqXHR)
{

        $('#status').text(data.message);
        if (data.code) //If mail was sent successfully, reset the form.
        $('#contact-form').closest('form').find("input[type=text], textarea").val("");
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
        $('#status').text(jqXHR);
    }
});

is responsible for catch POST request sent by your HTML form and send it up to you mail.php file, where your post data will be validated and send back with code 0(zero) which means that mail doesn't pass validation or 1(one) which means that your mail was sent. Codes 1(one) and 0(zero) are adequate to your JS "success" and "error" handlers. Then you need to handle success and error to let know your user that mail was sent or not.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No