javascript - jQuery Ajax Not Sending Array as Data Object - Stack Overflow

admin管理员组

文章数量:1414605

I'm building a contact form where when the user hits the submit button, it sends an email to the pany 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.

I'm building a contact form where when the user hits the submit button, it sends an email to the pany 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.

• javascript
• jquery
• arrays
• ajax
• post

Share Improve this question Follow asked Sep 3, 2015 at 18:13 Daniel HarrisDaniel Harris 1,9051111 gold badges4646 silver badges6565 bronze badges 3

• Try this: data: JSON.stringify({d: arr}) – leo.fcx Commented Sep 3, 2015 at 18:17
• @leo.fcx Still returns null. – Daniel Harris Commented Sep 3, 2015 at 18:19
• 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 Commented Sep 3, 2015 at 18:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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;
    }
});

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

$("#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;
    }
});                             

本文标签： javascriptjQuery Ajax Not Sending Array as Data ObjectStack Overflow