I am building a site which has javascript in it.
In my site if a user clicks on login or register button a modal popup will be shown.
What I need to know is if the user has disable javascript in his/her browser they should be sent to a normal html signup page (Like in imdb.com) when the user clicks the login link.
Give me some tips on what I should do to get result like that.
I am a newbie so don't be too harsh in your reply.
In short, you set dynamic onclick handler for your button and prevent the default event (in the example below with return false). If JavaScript is disabled, the original event (redirection) will work.
HTML:
<a href="/path/to/normal/sign/up.html" id="login">
JavaScript:
document.getElementById("login").onclick = function() {
// show popup
return false;
};
Have a normal link to the sign up page
Add an event listener to create the modal
Prevent the default behaviour of clicking on the link
Related
I am developing one stepwise form application where I am displaying some information on Modal popup. I am able to display the required information. If I refresh the page when the Modal is open the current Modal will close. Is there any way to stop closing the Modal on page refresh?
You can not prevent user clicking the refresh button.
Instead you can keep the state of the form in the local storage and in the page load event check if the user was in the middle of the form process.
If so, just show the modal again. There's no any other way.
//This is an example. This should be added when the user seen the dialog.
//This is just a Bootstrap example. Just to demonstrate the logic.
$("#modal-dialog").on("shown.bs.modal", function(){
localStorage.setItem("IS_SET", true);
});
$("#modal-dialog").on("hidden.bs.modal", function(){
localStorage.setItem("IS_SET", false);
});
$(document).ready(function(){
if(localStorage.getItem("IS_SET") && localStorage.getItem("IS_SET") === true){
//Which means the user was in the form process.
//And show the modal again on page refresh.
$("#modal-dialog").modal("show");
}
});
If you don't like the localstorage method, you can set a URL param which can be seen publicly in the URL.
I follow How to clear a textbox using javascript but my scenario is little change. I have a login button and when user click on login a pop-up window is open. He fill the textbox and for some reason he go back to main page. When he again come to login popup window he previous value is not cleared. May be this is because the page is not loaded. And I do not want to load page again. I want to use JQuery/JavaScript to remove the entered text. I has idea that I write code inside Close button but I don't know how to clear the textboxes. Please help.
Here is the code, scenario is that I used popup for login and sign up. In login popup there is link "Don't have login Id" when user click on it the sign up pop up with form is open.
Don't have Login Id
And the JavaScript method is
<script type="text/javascript">
function function_deletePreviousData(){
document.getElementById("signUp").value = "";
}
</script>
But nothing happened. I think this is because I don't give element id, I just give id of element which I used to land on sign up pop up form. Any idea for clear all form without accessing all elements and give it null value.
Instead of including code in close button click event, we should write code in login button click.This is one of my suggestion.
Try this once:
Javascript:
<script type="text/javascript">
function LoginButtonClick() {
document.getElementById`("TextBox_Id").value = "";
}
</script>
JQuery:
jQuery("#LoginButton_Id").Click( function()
{
$('#TextBox_Id').val("");
} );
Finally I find the method in JQuery to reset all fields. Just Trigger reset.
$('#form').trigger("reset");
Thanks all for help.
On my page I have a button object declared as below.
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile()">
The javascript makevisible() function just makes a <div> tag visible which acts then like a modal popup.
When the user hits the button, the the popup is displayed but after one second the user is navigated to sometargeturl.com. What I want is the popup to stop the navigation process until the user closes it, or clicks outside of it, only then do I want the navigation to resume.
Is this possible with plain html/css and javascript or do I have to use some fancy framework?
Cheers,
Bob
You need to prevent the default action by using return false;:
<a class="button class" href="www.sometargeturl.com" onclick="makevisibile();return false;">
Or put return false as the last line of your makevisible() function:
<a class="button class" href="www.sometargeturl.com" onclick="return makevisibile();">
function makevisibile(){
// ....
return false;
}
You want to prevent the default behaviour of the link (which is to navigate away).
You can either use another element instead of href for example a button or a code snippet similar to the one #Set Sail Media have suggested.
Keep in mind that in both cases you will manually need to change the url to the right location when the user closes the "pop-up".
EDIT 1
Bob, like you pointed out in your comments, if you disable the default behaviour of the href the page will not change when the user closes the pop-up window.
Let's assume you have a close function for the modal window which is called, close_modal() and it is called then the user closes the "pop-up"
function close_modal()
{
document.location='http://www.example.com';
}
You do NOT need to make a separate function for this, it all depends on how your page is currently looking.
For a better more complex answer please post a jsfiddle.
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!
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,
Click Here to create your profile</div>
</noscript>
To fix you link-gazumping problem, indeed, as #kamui says, use return false;
But as to your JS-disabled question - point the href at a real URL -> preferably the same URL as your JS-enabled stuff - or the same form, but in a new window.
I could not follow the link due to firewall restrictions on my side but...
You'll want to use whats called unobtrusive javascript.
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
This means if JS is available it will use it, if not continue working as plain html.
using jQuery you would first attach the click event to your button in the $.Ready() method.
<a id='btnTest' href='login.html' />
$(document).ready(function () {
// Attach click event to btnTest
$("#btnTest").click(function (e) {
// do logic
return false; // Returning false here will stop the link from following login.html.
});
});
Hope this helps.
I have used two frame in my web page... the below frame contain the validation of user for login information like username and password....
There is a button named "Login" which is attached with onClick event....
When I press Login button... the validation are done through Javascript and the new
page also opened,,, but in the same frame in which the login button is placed...
so , the my problem is how to open a page in Parent frmae when i click on "Login" Button... i know this can be done through the hyperlink...but i want to apply on Button...
This works, or parent.*frame_name*.location.href
<a href="#" onclick="parent.frames[i].location.href='whateverpageyoulike.html'">