How stop an HTML form from submitting if user is not signed in, but allow submit if user is signed in?

Question

In my app, a user must be signed in to submit form info.

After a user clicks on the form submit button, my jQuery checks if a user is signed in.

If not signed in, then an error message pops up, requesting sign in/up. I can now successfully stop the default action (submit).

However, how do I also allow the default action if the user is already signed in? With my current code, the default action is also blocked if the user is signed in.

Here's my code:

jQuery('.member-only').click(function(event) {
    var $element = jQuery(this);
    var SignedIn;

    jQuery.ajax({
        type: 'POST',
        url: '/ajax/member',
        dataType: 'json',
        success: function(data) {
            var $err = jQuery('<div></div>')
                        .addClass('member-check')
                        .html(data.msg)
                        .css('left', $element.position().left);
            SignedIn = data.SignedIn;

            if (!(data.SignedIn)) { // not signed in
                $element.after($err);
                $err.fadeIn('slow');
                return false;
            }
        }
    });

    jQuery('.member-check').live('click', function() {
        jQuery(this).fadeOut('slow', function() {jQuery(this).remove(); });
    });

    if (!SignedIn) {
        event.preventDefault();
        event.stopImmediatePropagation();
        return false; // block default submit
    }
});

Thanks.

Answer 1

You need to let your JS function return false; to block the event's default action.

However, this doesn't cover users who have JS disabled or are capable to spoof it. So you should handle this gracefully in the server side as well :)

---

Update: As per your update, please add

alert(typeof Signedin);
alert(Signedin);

right before if(!Signedin) and tell what you get for both cases. It might be of the wrong type and/or value which is causing that you're always entering the if block and thus always returning false.

For example, a type of undefined will always cause !Signedin to evaluate true. You'd like it to be a boolean type all the time with values true or false.

Answer 2

This is a Moo question. Your not loged in user should have never seen a form that he can't submit in the first place.

Fix your PHP so as to not write a form that a non-logged in user can't submit.

Answer 3

See if there is any user logged in . keep a flag for it. If flag is not set just disable the submit button . or just set the form action part using jquery only if flag is set.

Answer 4

Use event.preventDefault(); in your event handler. Return false only works in some cases (it's more of a workaround).

http://api.jquery.com/event.preventDefault/

https://developer.mozilla.org/en/DOM/event.preventDefault

Answer 5

$(form_id).submit(function(){ //triggered when user submits form
  var signed_in = check_if_user_is_signed_in(); //checking
  if(signed_in){ //singed in
    //Do stuff
    return true; //submit form
  } else{ //user not signed in
    //Do stuff
    return false; //prevent form from being submitted
  }
})

Answer 6

I would also add an ajax request to check if user is logged in if your website often is opened in multiple windows.

Answer 7

Please review my modifications to your code. Let me know the datatype of the returned data.SignedIn; I added a console.log to return it to firebug.

My example takes action on the document being ready, as opposed to waiting for the user to interact, thus preventing the usability problem of showing the user that an ansynchronous call is happening in the background (the ajax spinner):

$(document).ready(function($){
    var memberStatus;
    jQuery.ajax({
        type: 'POST',
        url: '/ajax/member',
        dataType: 'json',
        success: function(data) {
console.log(data.SignedIn) //I need to know what format this is returned (Boolean: True/False?)
memberStatus = data.SignedIn;
        }
    });
   if (memberStatus) { //if true, that means they are a member
      //draw member box
   } else {
      $("#submitButtonID").attr('disabled',true);
   }
});