How can I make a link work, only when a correct word is typed into a text field?
Question
I building an eCommerce website for a client. However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.
They want to show a 'hidden' shop page, when a generic password is entered.
So on the homepage of the site will be a password field, and a submit button.
The password is generic, let's say 'letmein'. When entered, the link to the shop page should become active.
If possible it would also be great to have the link greyed out/disabled before the correct word is typed.
Is this possible? Thanks so much if anyone can help!
4 answers
solution1
2 2015-08-04 15:29:11
If passwords do matter and there is sensitive data behind this door you are creating, this is a terrible idea. Passwords should never be a front-end data, because they are accessible to anyone with computer. If user access really doesn't matter and this is just a superficial gateway to make users feel special , JavaScript is indeed the answer. If access is casual and security doesn't actually matter you should try this:
You could create a link that stays inactive until the right password is entered into an HTML <input> . Use JavaScript/jQuery to check if the password is correct and change the anchor's value if it is.
Something like this maybe:
HTML:
<a href="#" id="link-to-site">Password Invalid</a>
<input type="text" id="password-field" />
JS:
var correctPass = "letmein"; // any password you want
$("#password-field").on("change", function() { // everytime the value changes we check the input for the password
if ($(this).val() == correctPass) { // if the value of the input is the password (no submit needed)
$("#link-to-site").attr("href", "www.actual-site-link.com"); // changes link of anchor
$("#link-to-site").html("You're in!"); // changes anchor's text to show a visual change (a nice UX touch)
}
});
Here's a working fiddle: JSFiddle
solution2
1 2015-08-04 15:30:07
However anyone with a good idea about jQuery/JS should be able to help as this does not relate to the backend.
Doing this on the front end is a bad idea. Anyone with a rudimentary knowledge of scripting will be able to enable the link (even without typing in the "password")
solution3
1 ACCPTED 2015-08-04 15:37:39
You can add the href after the password is correct and remove if it isn't like this here is working fiddle
As long as security doesn't matter this is just a link that you want to open up to everyone with no backend validation then this will work fine.
function updateLink(input) { if (input.value == "letmein") { document.getElementById("atag").href = "http://www.google.com"; } else { document.getElementById("atag").removeAttribute("href"); } }
<html> <body> <input type="text" onkeyup="updateLink(this);"> <a id="atag">Google</a> </body> </html>
solution4
0 2015-08-04 15:47:03
Thanks for your answers all.
To answer this question - no, security is not an issue here. It is just to add a layer of exclusivity. Users will receive the generic password when they sign up for the mailing list.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.