jQuery Ajax Not Sending Array as Data Object

Question

I'm building a contact form where when the user hits the submit button, it sends an email to the company from an ajax call. However, it is not passing the array variable from the form to the ajax PHP file. It seems to work when logging the array variable to the console upon success. But the data is missing from the email. Here is a sample of my code:

$("form").submit(function(e) {
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) {
        var arr = [];
        arr["fname"] = $('#fname').val();
        arr["lname"] = $('#lname').val();
        arr["email"] = $('#email').val();
        arr["subject"] = $('#subject').val();
        arr["newsletter"] = $('#newsletter').val();
        arr["message"] = $('#message').val();

        $.ajax({
            url: "contact-ajax.php",
            method: "POST",
            data: {d: arr},
            success: function (d) {
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },3000);
            },
            error: function(jqXHR, textStatus) {
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },4000);                    
            }
        });
    }
    else {
        alert("Your confirmation email does not match your email.");
        return false;
    }
});

var_dump($d) returns null in the console but console.log(arr) returns the valid array. Any help would be appreciated.

Use the network tab of your browser's developer tools to inspect the request that's sent. You should be able to see the request payload that was (or wasn't) sent to your server. — gilly3
– gilly3, Commented Sep 3, 2015 at 18:28

Robin Carlo Catacutan · Accepted Answer · 2015-09-03 18:30:40Z

Instead of using an array, use an object.

$("form").submit(function(e) {
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) {

        // from this 
        // var arr = [];
        // arr["fname"] = $('#fname').val();
        // arr["lname"] = $('#lname').val();
        // arr["email"] = $('#email').val();
        // arr["subject"] = $('#subject').val();
        // arr["newsletter"] = $('#newsletter').val();
        // arr["message"] = $('#message').val();

        // to this :

        var dataObj = { fname: $('#fname').val(),
                        lname:  $('#lname').val(),
                        email: $('#email').val(),
                        subject: $('#subject').val(),
                        newsletter: $('#newsletter').val(),
                        message: $('#message').val()};


        $.ajax({
            url: "contact-ajax.php",
            method: "POST",
            data: dataObj,
            success: function (d) {
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },3000);
            },
            error: function(jqXHR, textStatus) {
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },4000);                    
            }
        });
    }
    else {
        alert("Your confirmation email does not match your email.");
        return false;
    }
});

Wow, this solved it. Making the array to an object actually worked.

nirali · Accepted Answer · 2018-10-12 03:25:16Z

2

if u try to send an array in ajax like this it's will be not sent in set page

  var minprice = jQuery('#minPrice').val();
  var maxprice = jQuery('#maxPrice').val();
  var data =[];
  data['min'] = minprice;
  data['max'] = maxprice;

this is array not declre like this. Array create like this if you send this array in ajax.

var data ={};

create array like this

edited Oct 12, 2018 at 3:25

answered Oct 11, 2018 at 10:05

nirali

293 bronze badges

1 Comment

cytsunny Over a year ago

var data ={}; This is declaring object, not array.

santosh · Accepted Answer · 2015-09-03 18:30:01Z

$("#YourFormNameGoesHere").submit(function(e) {
    e.preventDefault();
    if ($('#email').val() == $('#cemail').val()) {
        var form_data = new FormData($('#YourFormNameGoesHere')[0]);
        $.ajax({
            url: "contact-ajax.php",
            method: "POST",
            data: form_data,
            async: true,
            cache:false,
            contentType: false,
            processData: false,
            success: function (d) {
                $('button#submit').css('background', '#A2D852');
                $('button#submit').html('Message Sent Successfully!');
                $('form').get(0).reset();
                //alert(d);
                console.log(arr);
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },3000);
            },
            error: function(jqXHR, textStatus) {
                $('button#submit').css('background', '#F75D53');
                $('button#submit').html('Failed to send. Please try again!');
                setTimeout( function(){                 
                    $('button#submit').css('background', '#FF8A00');
                    $('button#submit').html('Send Message <img src="contact/images/loading-icon.gif" id="loading-icon">');
                    $('#loading-icon').hide();
                },4000);                    
            }
        });
    }
    else {
        alert("Your confirmation email does not match your email.");
        return false;
    }
});

Collectives™ on Stack Overflow

jQuery Ajax Not Sending Array as Data Object

3 Answers 3

2 Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Related