Question

Possible Duplicate:
$.post throwing “Illegal invocation ”

I’m getting the following error when trying to submit a AJAX request: Uncaught TypeError: Illegal invocation. Here’s the code: http://pastie.org/private/px6qinlgydv6cgcwrghvxw and the issue disappears if I remove the $.ajax() function.

 <script type="text/javascript">
            $(document).ready(function() {
                $('.inquiry-button').on('click', function(e) {
                    if($('.x-box ul li').length > 0) {
                        $('.x-box, .x-box-bottom').fadeOut('slow', function() {
                            $('.inquiry-form, .inquiry-buttons').fadeIn();
                        })
                    }


                })
                $('.edit-inquiry-submit').on('click', function(e){
                    e.preventDefault();
                    $('.inquiry-form, .inquiry-buttons').fadeOut('slow', function() {
                        $('.x-box, .x-box-bottom').fadeIn();
                    })
                })

                $('.inquiry-submit').on('click', function(e) {
                    e.preventDefault();
                    var valid = 1;
                    var name = $('#your_name');
                    var email = $('#your_email');
                    var company = $('#company_name');

                    if (!name.val() && valid == 1) {
                        var valid = 0;
                        name.focus();           
                        alert('Please provide your Name');
                    }
                    if (!email.val() && valid == 1) {
                        var valid = 0;
                        email.focus();
                        alert('Please provide your Email Address');
                    }
                    if (!company.val() && valid == 1) {
                        //   var valid = 0;
                        //  company.focus();
                        //  alert('Please provide your Company Name');
                    }

                    if (valid == 1) {
                        $('#i-form, .inquiry-buttons').fadeOut('', function() {
                            $('.inquiry-thank-you').fadeIn('', function() {
                                $.ajax({
                                    url: 'http://projectsxxxxxdev.com/cooling/wp-admin/admin-ajax.php',
                                    data: {'action' : 'sendProducts', 'name' : name, 'email' : email, 'company' : company},
                                    dataType : 'json',
                                    type: 'POST',
                                    success : function(data){
                                        console.log(data)

                                    }})


                            });
                        });

                    }
                })  


            })


        </script>

Answer 1

You’re trying to pass jQuery objects in your data parameter, call .val() to use their values

$.ajax({
    url: 'http://projectsxxxxxdev.com/cooling/wp-admin/admin-ajax.php',
    data: {'action' : 'sendProducts', 'name' : name.val(), 'email' : email.val(), 'company' : company.val()},
     dataType : 'json',
     type: 'POST',
     success : function(data){
         console.log(data)
     }
});