Issues passing form data to PHP using Ajax

Question

I originally had a regular HTML form that submitted the data entered through a button, which redirected the user to the PHP code page ran the code and everything worked.

Since everything now is confirmed working I need to pass the variables in the form to PHP using Ajax instead to keep the user on the original page.

All of my code checks out everywhere except for any Ajax request I use in the below function. The function correctly grabs all the variables from the form but no matter what form of Ajax or $.post that I use it fails to pass anything.

I am trying to pass all data to http://localhost/send-email.php and respond to the user with a pop up including the echo response from the PHP code.

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"  

function capacity(){
  var fullname = document.getElementById("fullname").value;
  var time = document.getElementById("time").value;
  var aux = document.getElementById("aux").value;
  var issue = document.getElementById("issue").value;
  var issueid = document.getElementById("issueid").value;
  var reason = document.getElementById("reason").value;
}

Like I said I read all documentation on Ajax and followed many examples on here but i could not get anything to work. Any help on what my Ajax call should look like is appreciated.

Answer 1

There are a couple of different ways you can POST in the backend.

Method 1 (POST Serialize Array from Form) - jQuery.post()

$.post('/send-email.php', $('form').serializeArray(), function(response) {
    alert(response);
});

Method 2 (Structure Object and POST Object) - jQuery.post()

var formObject = {
    fullname: $('#fullname').val(),
    time: $('#time').val(),
    aux: $('#aux').val(),
    issue: $('#issue').val(),
    issueid: $('#issueid').val(),
    reason: $('#reason').val()
};

$.post('/send-email.php', formObject, function(response) {
    alert(response);
});

Method 3 (Use AJAX to POST Serialize Array from Form) - jQuery.ajax()

$.ajax({
    method: 'POST',
    url: '/send-email.php',
    data: $('form').serializeArray(),
}).done(function(response) {
    alert(response);
});

Method 4 (Use AJAX to POST Form Data) - jQuery.ajax() - FormData Objects

var formData = new FormData();
formData.append('fullname', $('#fullname').val());
formData.append('time', $('#time').val());
formData.append('aux', $('#aux').val());
formData.append('issue', $('#issue').val());
formData.append('issueid', $('#issueid').val());
formData.append('reason', $('#reason').val());

$.ajax({
    url: '/send-email.php',
    dataType: 'json',
    contentType: false,
    processData: false,
    data: formData,
    type: 'POST',
    success: function(response) {
        alert(response);
    }
});

Virtually, there are many different methods to achieving what you are attempting.