ajax serializearray不输出任何值

Question

I have a form HTML as follow:

<div id="error_message"></div>

<form action="daterequest.php"  id="daterequest_form" method="post">

            <select name="option1">
                <option value="1">1</option>
                <option value="0">0</option>
                <option value="2">2</option>
            </select>

            <input type="text" name="option2" >

    </form>

and I have JS script like this

$(document).ready(function(){
$('#button_submit_form').on('click', function () {
  var data = $('#daterequest_form').serializeArray();   
  alert(data);

    $.ajax({
        url: 'daterequest.php',
        type: 'POST',
        data: data, 
        success: function(response) 
            {

                if (response == 'empty') { 
                  $('#error_message').text('ERROR MESSAFGE') } 
                else    {
                    $('#error_message').html(response);
                    $('#daterequest_form').fadeOut('400');
                }; 
            }
    });     
    e.preventDefault();
});


});

my alert(data); only gives me [object Object], [object Object] .

I can't get the data to show in my alert.. I should see [option1 Value], [option2 inputvalue]

Also, once I figure out how to get the data in the alert, how to I retrieve it in PHP? $_POST['what goes here']; ?

Answer 1

alert will not give you the details of the object use console.log() instead :

console.log(data);

Take a look to Why is console.log() considered better than alert()? .

Hope this helps.

Answer 2

There is no issue here - the problem is because you're using alert() to debug. This means that the variable being displayed is coerced to a string, hence the array of objects is turned in to '[object Object], [object Object]' . Instead use console.log() to debug your code.

Also, from what you're trying to do I would suggest that using the serialize() method is more suited to your needs, and you should hook to the submit event of the form so that people using the keyboard also fire the event when the submit the form by pressing the Enter key. Try this:

$('#daterequest_form').on('submit', function (e) {
    e.preventDefault();
    var data = $(this).serialize();   
    console.log(data);

    $.ajax({
        url: 'daterequest.php',
        type: 'POST',
        data: data, 
        success: function(response) {
            if (response == 'empty') { 
                $('#error_message').text('ERROR MESSAFGE') 
            } else {
                $('#error_message').html(response);
                $('#daterequest_form').fadeOut('400');
            }; 
        }
    });     
});

Then in your PHP you can retrieve the passed data by using $_POST and specifying the name of the form value:

var option1 = $_POST['option1'];
var option2 = $_POST['option2'];