Manga Black Manga Black - 5 months ago 7
PHP Question

FORM Login not working with Anchor #

I have the following form submit code

<div class="top-links">
<ul>
<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>
<div class="input-group" id="top-login-password">
<input type="password" class="form-control" name="password" placeholder="Password" required>
</div>
<div class="input-group" id="top-login-remember">
<label><input type="checkbox" value="yes" name="remember_me">&nbsp; Remember me</label>
</div>

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

</form>
</div>
</li>
</ul>
</div>


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

Working fine

http://example.com/index.php


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

http://example.com/index.php#


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

example.com/index.php but I prefer if it can be example.com without the index.php

Answer

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:

<script>
function eventClickBtn() {
    // Your logic to open popupbox
    return false;
}

// For jQuery
$('.eventClickBtn').click(function(e){
    e.preventDefault();
});
</script>

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