Manga Black Manga Black - 3 months ago 5x
PHP Question

FORM Login not working with Anchor #

I have the following form submit code

<div class="top-links">
<li><a href="javascript:void(0);">Sign In</a>
<div class="top-link-section">
<form id="top-login" role="form" action="">
<div class="input-group" id="top-login-username">
<input type="text" class="form-control" name="username" placeholder="Username" required>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me">&nbsp; Remember me</label>

<button class="btn btn-danger btn-block" type="submit">Sign In</button>


If the user does not click on any anchor link in the page before sign in, then the form login works fine.

Working fine

However, if the page url become something like (with anchor # behind the url address)

as I got some links that is of

<a href="#">Events</a>

If user click Events to see some popup before they login, the login form will not work, How do I handle such scenario to ensure login still proceed even with # at the url address.

Assume after login always goes back to but I prefer if it can be without the index.php


If below code puts # at the end of the page then you can make it to return false to do nothing when user clicks on this click and just open the popup.

<a href="#">Events</a>

You can use pure JS or jQuery to achive the same.
So modify the HTML of those elements like this,

<a href="#" onclick="return eventClickBtn();">Events</a> <!-- for plain JS --> 
<a href="#" class="eventCommonBtn">Events</a> <!-- for plain jQuery --> 

At JS side you need to add following:

function eventClickBtn() {
    // Your logic to open popupbox
    return false;

// For jQuery

By using event.preventDefault(); default action of the event will not be triggered, same goes for plain JS. If you return false it won't fire up the hyperlink mentioned in href