Question

I have a test page here: http://www.problemio.com/test.php

and if you press “Click To Test Signup” you get a form. If on that form, you click “Log In” it recognizes that you clicked that, and opens the login form.

But the problem is that on the login form, if you press “create profile” it actually goes to the url of the href tag and not to the jQuery click event.

My quetion is what is the best practice of doing this? I hered of something called “prevent default behavior” but not sure how/when it should be used.

I am guessing that if the user has JS disabled, they should still be able to log in. How can I set it up so that users can log in and make accounts in the jQuery way first, and some default way if they have JS disabled?

Thanks!

Answer 1

You can do this with pure jQuery with

 $("#createprofilelink").click(function(event) {
      event.preventDefault();
      {create profile logic}
 });

more details of this can be seen in the jQuery documentation http://api.jquery.com/event.preventDefault/

Edit: I removed this because of @maxedison comment that it stops the jQuery event from firing but I have just tested this and the jQuery event fires but the link does not go to the address.

 <a id="thelink" href="http://www.google.com" onclick="return false;">the link</a>
 <script>
      $('#thelink').click(function(){alert('alert me');});
 </script>

As for the JS being disabled part of the question the link really should point to to a real form to fill in, as Taryn East correctly says, so the user gets the same functionality even if the user experience is lower by not using JavaScript.

You could even go down the noscript route

  <noscript>
        <div>Your user experience would be far improved if you 
        enable JavaScript but if you insist, 
        <a href="{real link}">Click Here to create your profile</a></div>            
  </noscript>