Unrecognized function - but why?

Question

I have an Ajax contact form that links to a jquery file but for some reason I get the following error in Firebug:

$("#contactform").submit is not a function

Here is the link to the jquery file:

<script type="text/javascript" src="scripts/jquery.jigowatt.js"></script>

Here is the jquery code:

jQuery(document).ready(function(){

$('#contactform').submit(function(){

    var action = $(this).attr('action');

    $("#message").slideUp(750,function() {
    $('#message').hide();

    $('#submit')
        .after('<img src="assets/ajax-loader.gif" class="loader" />')
        .attr('disabled','disabled');

    $.post(action, { 
        name: $('#name').val(),
        company: $('#company').val(),
        email: $('#email').val(),
        phone: $('#phone').val(),
        subject: $('#purpose').val(),
        comments: $('#comments').val(),
        verify: $('#verify').val()
    },
        function(data){
            document.getElementById('message').innerHTML = data;
            $('#message').slideDown('slow');
            $('#contactform img.loader').fadeOut('slow',function() {$(this).remove()});
            $('#contactform #submit').attr('disabled',''); 
            if(data.match('success') != null) $('#contactform').slideUp('slow');

        }
    );

    });

    return false; 

});

});

And last but not least, here is the page where it is all supposed to come together: http://theideapeople.com.previewdns.com/contact_us.html

I would appreciate some help getting the function to function properly. Thanks.

Answer 1

You've called:

jQuery.noConflict();

Thus $ is no longer an alias for jQuery. That's the problem. Either remove that line or, if you need it, change all your references from $ to jQuery (as some of your code already does).

On a side note, you have:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt; 

I'm not sure it's kosher to use those guys for hosting. On the other hand, Google explicitly has an API for it. I would suggest changing that to:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;

Answer 2

Might be because of the submit button id being submit. I have had problems like this before because of this.

Answer 3

There is MooTools library also included in your page:

<script type="text/javascript" src="http://support.previewdns.com/mt.js"&gt;&lt;/script&gt;

MooTools overwrites $ variable, so $('#contactform') tries to find element with id '#contactform' (in MooTools you don't explicitly use hash prefix when querying elements by id).

This still works as expected:

jQuery('#contactform').submit(...);

If you need to run both jQuery and MooTools, take a look at jQuery's no-conflict mode.