jQuery: handler is not defined?

I am super noob when comes to javascipt, how come click() isn't working? This code submits a form data to a php script and loads the reply into a div. You can see it action here: http://shorelinerenovations.com

jQuery(document).ready(function(){
   var ajax_load = "<img class='loading' src='http://shorelinerenovations.com/wp-content/themes/Narm/images/load.gif' alt='loading...' />";
   var loadUrl = "http://shorelinerenovations.com/wp-c开发者_开发百科ontent/themes/Narm/optin.php";
   jQuery('form#optin-form input#frm_submit').click(function(){
       jQuery("#submit-result").html(ajax_load);
       jQuery.post(
           loadUrl,
           jQuery("#optin-form").serialize(),
           function(responseText){
               jQuery("#submit-result").html(responseText);
           },
           "html"
        );
   });
});

You have to prevent the default action, which is submitting the form:

jQuery('#optin-form').submit(function(event){
    event.preventDefault();
    // other stuff
});

Only because you make an Ajax request doesn't mean that the browser will not submit the form the "normal" way.

Better assign an event handler to the submit event of the form. Users might submit the form without clicking the button.

Jilseego, when Firebug displays an error, there should be a red cross next to the Firebug icon. Click on it and that should bring you to where exactly the error is in your code.

The page might be reloading because, if there is a JavaScript error, the script is not executed at all by the browser.