Why is this jQuery function not recognized?

Question

With some help from the fine folks on Stackoverflow, I built a small newsletter subscription submission form:

 <div id="news-signup">
      <form action="news.php" method="post">
        <fieldset>
          <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" onfocus="if (this.value=='YOUR EMAIL ADDRESS') this.value='';" />
          <input type="submit"  value="::Submit Query::" id="red-submit" />
        </fieldset>
      </form>
    </div>

Here is the jquery that replaces the form with a confirmation message:

$(document).ready(function() {
  $('#news-signup form')
    .validate({
     submitHandler: function(form) {
       $(form).ajaxSubmit({
            success: function() {
            var Image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"});
                $('#news-signup form').hide();
                $('#news-signup').append(Image);
            }
       });
     }
  });
});

This works perfectly on this page, but the replacement image does not kick in on this page.

I would appreciate some direction to resolve this.

Thanks.

Answer 1

I don't really see why this should not work (but I also prefer PrototypeJS) but what happens, if you get rid of all this form stuff and register a click callback on the submit button? Something like this:

HTML

<div id="news-signup">
    <input type="text" id="your-email" name="your-email" value="YOUR EMAIL ADDRESS" />
    <input type="submit"  value="::Submit Query::" id="red-submit" />
</div>

I also got rid of the inline scripts (don't do this).

JS

$(document).ready(function() {
    var emailInput = $("#your-email");

    emailInput.focus(function() {
        //  THREE = !
        if(this.value === "YOUR EMAIL ADDRESS") {
            this.value = "";
        }
    });

    emailInput.blur(function() {
        if(this.value === "") {
            this.value = "YOUR EMAIL ADDRESS";
        }
    });

    $("#red-submit").click(function() {
        $.ajax({
            type: 'POST',
            url: 'news.php',
            data: {
                'your-email': emailInput.val()
            },
            success: function() {
                var image = $('<img />').attr({src:'_images/register-thanks.png', width:332, height:35, alt:"Success"});
                $('#news-signup input').hide();
                $('#news-signup').append(image);                
            }
        });
    });
});

Let me know, if it worked. And by the way always use 3 = when comparing objects.