Question

I’m building a login form that will validate the login against a database, then if successful pass the user to a secure page.

I have verified that my SQL is correct and based on the examples that I borrowed code from, my submit form should be correct also. In fact, the sample code works properly on my server, which suggests a DOM error. This is a stripped-down version of what I’m running:

<script type="text/javascript" src="inc/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
    jQuery("#login_form").submit(function() {
        jQuery("#msgbox").removeClass()
                         .addClass('messagebox')
                         .text('verifying')
                         .fadeIn(1000);

        jQuery.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
            if (data == 'yes') { /* ... */
            }
            else { /* ... */
            }
        });
        return false;
    });
});​
</script>

The form runs thus, some lines further down the page:

<form action="" id="login_form" method="POST">
  <input type="text"     name="username" id="username" value="username" />
  <input type="password" name="password" id="password" value="password" /><br />
  <input type="hidden"   name="homeDir"  id="homeDir"  value=""         /> <span id="msgbox"></span> <br />
  <input type="submit"   name="Submit"    id="submit"    value="ENTER" class="submit"/>
</form>

However, JS throws an error saying “Uncaught TypeError: Cannot call method ‘val’ of null.”

I’m missing something here. Given that .post is not called until the form is submitted (and the error does not trigger until the form is submitted), why would val() be called against a null value? The form would be populated by then.

Also, I’m living on a PHP4.4.9 server. To the best of my understanding this is not a JSON call (therefore PHP5), but I’ll freely admit I’m in over my head here. Webdev was a past life for me and was never my strong suit.

Answer 1

You were trying to call val() on a non-jquery object. When you use jQuery.noConflict mode ‘$’ will be undefined. Try wrapping your jquery code like this…

See jQuery.noConflict doc – http://api.jquery.com/jQuery.noConflict/
Various methods to use jQuery.noConflict – http://zenverse.net/jquery-how-to-fix-the-is-not-a-function-error-using-noconflict/

<script>

jQuery.noConflict();

(function($) { 
    $("#login_form").submit(function()
    {
        $("#msgbox").removeClass().addClass('messagebox').text('verifying').fadeIn(1000);

        $.post("inc/ajax_login.php", {
            user_name: $('#username').val(),
            password: $('#password').val()
        }, function(data) {
          if(data=='yes') {/* ... */}
          else {/* ... */}
        });

        return false;
    });
})(jQuery);

</script>