Checking password without clicking a button - javascript

How can we redirect to another page after checking password without clicking on any button? After entering password it should check and automatically redirect to next specified page.
Do I need to add any function in text-box input tag?
//This is my HTML code.
<div style="margin-top:27%;margin-left:40%;">
<b><i>Enter pin</i></b>
</div>
<input type="password" id="pwd" autofocus required>
//This is the javascript.
<script>
function login()
{
logged_in=false;
var pin=documemt.getElementById("pwd").value();
if(pin=="hotel")
{
logged_in=true;
window.open("screen3.html","_self");
}
else
alert("Please enter correct pin");
}
</script>

Maybe this isn't a fully technical answer, but it is worth to mention here.
NEVER store passwords in javascript manifestly. User can open this file and just read it. For Your question, there is an answer.
You must have a php file that can check the password (get from the post).
<?php if(isset($_POST['pass']) && $_POST['pass'] == 'hotel') echo "ok"; ?>
Then using for example Jquery and AJAX on every change in input send ajax request to this php file with posted password. Than compare downloaded file with "ok", and if OK, use javascript window.location.replace("new url");
This is one from milions of possible answers. But remember that You should set session and remember login person, and check it on every other site. In other case, someone can enter manually the same url, that You are redirecting, and password isn't needed.
Hope it helps
Jacek
PS. this php file should also be protected for multiple password comparison, in other case it is easy to break easy passwords with bruteforce, knowing the mechanism.
PS 2. Nevertheless, in my opinion, You are doing something wrong, and this approach should be rethinked... My proposed answer also is very, very, very general. Too general.
UPDATE
Maybe better answer is to make a standart php script for logging with server verification and submit button. Then, using Javascript, hide submit button, and on input change simulate clicking it. But in that case, if password is wrong, the page should remember what the user has entered... It isn't difficult to write in php:
$input_value = isset($_POST['password']) ? $_POST['password'] : '';
But I really vote for leaving the submit button as the mother nature learned us ;).
Thx for replies, best regards.

First off you need a way to connect your input element to a function, if you don't want to use a submit button you could use some sort of on-change/on-keyup handler to detect input.
Javascript bind keyup/down event
In this function I'd recommend a better way of validation, like Jacek said.
When you figured out how to do that, you might want to take a look at this question:
How can I make a redirect page in jQuery/JavaScript?

Use of onKeyUP Event of input text as below Example.
<input type="text" onKeyUP="login();" id="pwd">
<script>
function login()
{
logged_in=false;
var pin=documemt.getElementById("pwd").value();
if(pin=="hotel")
{
logged_in=true;
window.open("screen3.html","_self");
}
else
{
alert("Please enter correct pin");
}
}
</script>
Demo Of onkeyUp
.keyup()
I hope it will help you.

When document is loaded or ready you can do
$('#pwd').onkeypress = login();
to bind the login to the keypress handler of your pwd box.
When 'logged_in == true' You can do a 'window.location = "http://www.google.com"' to redirect to your target page.
I guess there should be some parameter (session id?) or similar to verify that the user not just used the url by hand.

After validating your login data, use Response.Redirect("YourPage.aspx", False). It will redirect you to the page you specified.

Related

How to validate only one captcha on a page

I have two forms on a page whose inputs I want validate and both have captchas which I also want to validate.
Clicking the forms submit button will either console.log( $(this) ); #form1 or #form2 depending which one was clicked. With that I can safely target the respective inputs, but with captcha I dont know if you can do that. I'm using the below code that works when theres only one captcha. My guess is, because it isnt using $(this) or something similar, it uses both forms recaptcha and breaks. In what way could I only trigger the captcha that is inside the currently submitted form?
if (grecaptcha && grecaptcha.getResponse().length > 0) {
//the recaptcha is checked
reCaptcha = true;
} else {
//The recaptcha is not cheched
reCaptcha = false;
$(this).find('.g-recaptcha').addClass('captcha-error');
}
You should not need more than 1 captcha per page.
The purpose of captcha's is to protect against bots. Once someone has solved a captcha, they have earned the trust of the website insofar as they are not a bot.
Requiring users to solve more than one is entirely pointless. My suggestion is to place the one captcha in a convenient spot, such that it clearly applies to both captchas.

How can I make a link work, only when a correct word is typed into a text field?

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!
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:
Password Invalid
<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
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>
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")
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.

Change search from /?s=searchterm to /searchterm without htaccess in js

I'm trying to use the below search form and js to search my site. However, whenever you type a word in the form and click submit the form them takes the users browser to http://example.com/?s=searchterm , but I want it to take them instead to http://example.com/searchterm and totally leave out the characters ?s=
<script type="text/javascript">
function submitform()
{
document.forms["searchsite"].submit();
}
</script>
<form id="searchsite" action="/">
<input type='text' name='s' placeholder='search'>
Submit
</form>
Any positive advice? Btw, no, I don't believe I can use htaccess and mod_rewrite since I already have rules set.
You could set an onsubmit handler to intercept the form’s submission and replace the default action with setting the location href. This relies on JavaScript being enabled in the client side:
<form id="searchsite" action="/" onsubmit="javascript:location.href=this.action + encodeURIComponent(this.elements.namedItem('s').value); return false;">
This escapes the search term so that if the user enters something with ? or / in it, the server will interpret that as part of the path instead of thinking that the client is trying to send a querystring or access some subdirectory. The return false; states that the browser should stop its normal form submission procedure since the onsubmit handler has already updated location.href, which will cause the browser to start navigating as soon as the onsubmit handler returns.
However, you really should supplement this with server-side code. For something this simple, the JavaScript can be there to make your URIs pretty while skipping an HTTP redirect (so that the browser goes directly to the requested page slightly faster than otherwise). But you should really have a server-side redirect that gets triggered whenever the GET s parameter is sent.
Extra note: you should really replace your submission script with a <button/>, like:
<button type="submit">Submit</button>
and just drop your <a/> and <script/> tags completely. You get all of the functionality you need by overriding the form submission handler itself, no need to try to intercept button clicks, etc. With this change, your form should now work when the user presses ENTER instead of requiring the user to TAB to the <a/>. Use the intended HTML elements for their intended purposes and hook into the right events ;-).
I assume that your question is only about the client-side of the code and that you already have figured how to get your server-side code to read the value from the URI path. Figuring out how to read the value, if it is submitted this way, would take me some time to research and would require more information about your server-side setup.
Instead of submitting the form, build the URL and then set the location. You can add an ID to the search term (s in this case) and then simply build the URL:
var searchTerm = document.getElementById("s").value;
document.location = "http://example.com/" + searchTerm;

Form Field Into Url

I'm new to this kind of stuff so sorry if this is not possible or does not make any sense. Im making a app where someone puts in there username into the form and when they press enter a popup says words but then i want for after they press ok it puts the username into the form ---- instagram://user?username --- where it says username thats where i want the username from the form to go then it will go there. sorry if this doesnt make sense or is not possible wondering if it is
You want to set your form action to GET. I believe that is what you are trying to ask.
<form action='[url submitting to]' method='GET'></form>
Using jQuery, if this is the language you are working with, you could prevent the submit and get the username field and add it to url and load this page.
//html
<form>
<input id="username">
</form>
//javascript
//the submit event is captured
$('form').on('submit', function(e){
//the event is passed in on the function and is used to prevent the
//default action so we can perform some further action
e.preventDefault();
//here we grab the value of the the #username text field
var user = $('input#username').val();
//here we are loading the instagram page based upon the user's textfield
window.location = 'instagram://user?' + user;
});
Is this what you are looking for?

javascript form textbox post js and html

I have a textbox somewhat like the main google search textbox. When you start typing, the javascript triggers a php script that offers suggestions that you can click on . That part works fine. However, I also want the user to be able to enter text and then just submit it--analagous to rejecting Google's hints and typin in your own search term. Right now, I am trying to do this in html and it is not working. Here is my code:
<form action="mail.php" method="post"><input type="text" name="maddress" size="30" onkeyup="showResult(this.value)"><input type="submit" name="submit" value="Email"></form>
Basically, the javascript within the onkeyup works fine. However, the form is not posting the value in the textbox" to the php script. Perhaps I have a typo somewhat but I can't find it. or maybe the onkeyup is preventing the form from posting...
Would appreciate any suggestions.
showResult() should explicitly return true (or in any case, something non-falsy). Returning false (or a falsy value) from an event handler prevents the default action, in this case, posting the form.
I dont know if this is what you're looking for but if you use the concept of this:
<script type="text/javascript">
function insertText(val,e){
document.getElementById(e).innerHTML+=val;
}
</script>
<textarea id="textIns"></textarea><br />
Insert 'Hello'<br />Insert 'GoodBye'
You can change the 'hello' and 'goodbye' with vars from your php script or where ever you get the items from and it should insert it and allow you to post it.
So just insert this into your function and then it should work. I tested it by adding the textarea in the code to a form and echoing it int he php and i got exactly what was added by the javascript... hope it works. Sorry if it wasn't exactly what you were looking for. The question wasn't to easy to understand because I couldn't see the rest of your source.

Categories

Resources