RandoGuy99999 RandoGuy99999 - 1 year ago 64
Ajax Question

Issues passing form data to PHP using Ajax

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

that I use it fails to pass anything.

I am trying to pass all data to
and respond to the user with a pop up including the echo response from the PHP code.


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 Source

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) {

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) {

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

    method: 'POST',
    url: '/send-email.php',
    data: $('form').serializeArray(),
}).done(function(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());

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

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download