CODEWITHSUNDEEP
javascriptjquery
Nabil
Nabil

Reputation: 175

jQuery - Illegal invocation when post

I am creating a contact form and when I execute it I get the following error:

Uncaught TypeError: Illegal invocation

Here is my code, cant seem to find whats wrong. If you'd like to see the problem live: Link goes here

$(document).ready(function() {

var submit      = $('#contact input[type="submit"]');

var name        = $('#contact input[name="name"]');
var email       = $('#contact input[name="email"]');
var company     = $('#contact input[name="company"]');
var phone       = $('#contact input[name="phone"]');
var skype       = $('#contact input[name="skype"]');
var budget      = $('#contact ul.budget span.value');
var message     = $('#contact textarea');

// validation
$(submit).click(function() {
    event.preventDefault();
    var proceed = true;

    if( name.val().length == 0 ) {
        $(name).addClass('animated bounce');
        proceed = false;
    }
    if ( email.val().length == 0 ) {
        $(email).addClass('animated bounce');
        proceed = false;
    }
    if ( budget.hasClass('notset')) {
        $('.budget').addClass('animated bounce');
        proceed = false;
    }
    if ( message.val().length == 0 ) {
        $(message).addClass('animated bounce');
        proceed = false;
    }
    if ( name.val().length == 0 || email.val().length == 0 || budget.hasClass('notset') || message.val().length == 0 ) {
        setTimeout(function () { 
            $('input, .budget, textarea').removeClass('animated bounce');
        }, 1000);
    }

    // if form is correctly filled
    if(proceed) {

        post_data = {'cName':name, 'cEmail':email, 'cCompany':company, 'cPhone':phone, 'cSkype':skype, 'cBudget':budget, 'cMessage':message};

        $.post('contactsubmit.php', post_data, function(response){  

            if(response.type == 'error')
            {
                output = response.text;
            }else{
                output = response.text;
            }

            alert(output);
        }, 'json');
    }
});

});

I've used it before, now I made some changes to the validation, just cleaned it up a bit and it starts messing with me.

Grateful for all help I can get.

Thank you!

Upvotes: 0

Views: 327

Answers (2)

htanata
htanata

Reputation: 36944

The values on the post_data object are jQuery objects instead of strings:

post_data = {'cName':name, 'cEmail':email, 'cCompany':company, 'cPhone':phone, 'cSkype':skype, 'cBudget':budget, 'cMessage':message};

Instead, you should get the value of it:

post_data = {
  'cName': name.val(),
  'cEmail': email.val(),
  'cCompany': company.val(),
  'cPhone': phone.val(),
  'cSkype': skype.val(),
  'cBudget': budget.val(),
  'cMessage': message.val()
};

But there's a simpler way by using .serialize() to submit the form field values:

$.post('contactsubmit.php', $('#contact').serialize(), function(data) {
}, 'json');

Upvotes: 1

adeneo
adeneo

Reputation: 318182

You have post data that looks like this

post_data = {'cName':name, 'cEmail':email, 'cCompany':company, 'cPhone':phone, 'cSkype':skype, 'cBudget':budget, 'cMessage':message};

Note that all the variables you're referencing are jQuery objects

var name        = $('#contact input[name="name"]');
var email       = $('#contact input[name="email"]');
var company     = $('#contact input[name="company"]');
var phone       = $('#contact input[name="phone"]');
etc ...

You can't send a jQuery object with $.post, that's an "Illegal invocation", you probably want the value instead

var post_data = {
    cName  : name.val(), 
    cEmail : email.val(), 
    etc ...
}

Upvotes: 1

Related Questions