ajax serializearray not outputting any value

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']; ?

Don't use `alert()` for debugging as it coerces values to strings - hence the `[object Object], [object Object]`. Use `console.log()` instead. From what you describe it sounds like `serializeArray()` is working correctly. I would say that `serialize()` sounds more suited to your needs though. — Rory McCrossan, Jan 06 '16 at 11:41
try alert(data['option1']); or alert(data.option1); instead of alert(data); — Amit Rajput, Jan 06 '16 at 11:42

score 1 · Answer 1 · edited May 23 '17 at 12:04

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.

edited May 23 '17 at 12:04

Community

1
1

answered Jan 06 '16 at 11:43

Zakaria Acharki

66,747
15
75
101

score 1 · Accepted Answer · answered Jan 06 '16 at 11:45

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'];

ajax serializearray not outputting any value

2 Answers2