mail.php not working (tutorial unclear)

Topic: mail.php not working (tutorial unclear)

Jordan Brooks free asked 6 years 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 free commented 6 years ago

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

Add comment

Witold Tkaczyk free answered 6 years ago

0 0 Best answer

I will try to make it clear
<h5>this code:</h5>
<pre>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);
    }
});</pre>
<span lang="en">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.</span>

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Free
Premium support: No
Technology: General Bootstrap questions
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

Jordan Brooks

2Support score
1Questions 0Answers 0Snippets