how to password protect any field in form (wants suggestions) - javascript

Here I want to create one field(select box- dropdown) in form which is password protected.
when user click on that dropwon one prompt appears, over here user enter the password , and if password is correct then and after then user can select value of that dropdown box.
so how i can achieve this functionality?

Simple:
disable/hide the select
onclick: open a prompt or dialog
onsubmit: send the data via AJAX and check the password in background with PHP (or another server-side language)
enable/show the select, if the password was right
Notice:
Javascript is readable by the client, you've to check the password with PHP (or another server-side language). If you write the password in Javascript, the user could figure it out by reading the source code.
The user could manipulate the HTML and Javascript local. You must verify all of his sent data on the server side.
By the way
I would enable/disable the select due to the users rights

I am afraid there is no pre-made solution for you - you will have to develop your own, i.e. display disabled dropdown initially, display your own password form pop-up on click event, compare if passwords match and if they do, finally enable the dropdown.
The most challenging issue here will be password protection. If you want to have this feature at least a little secure, you can't just include correct password in your js/jquery source code. Either use encryption or AJAX for that.

You could position a invisible div over the field absolutely, and listen for a click event on that div. If the password is correct remove the div.
If you wanted to be security conscience I wouldn't include the dropdown at all unless they get the password right. Return the contents of the select once the password is correct.
Once the password is correct you can populate the selectfield and open it.
Because even if you disable the select like others are saying there is nothing stopping someone from going into the html and enabling it. It needs to be unavailable unless verified.

Related

Is there some way to simulate keyboard input or setting the input value WITHOUT using javascript element.value?

I know this is confusing and difficult because I have not code to show. Thats part of the problem, I dont really understand what is happening and I came here for some ideas.
In my job employees need to connect to two online systems.
The first one is programmed by me. Basically employees need to put some login credentials to enter our internal system to see their calendar, tasks, etc. Everything is good until here
The second system is a CRM site provided from an external providor. Users need to login into that system and the login credentials ARE THE SAME than the first system we have. We are loading this secondary page as an iframe inside the first system.
Considering our users already filled a login/password page I would like to fill automaticaly the second login form with the data we already have.
The problem is that somehow the login form of the CRM have some sort of validation system and if I use javascript to paste the login/password the "login button" remains disabled. The value is there and I can see it in the input field. That button only validates if an user fills the value with the keyboard or paste from the clipboard.
That is all I have at the moment and I dont know how to continue. Is there any way to simulate keyboard input or to ask the page to validate the content of the field? Any idea will be very appreciated.

How do I create a hyperlink inside an input text field in html?

I have an input text field in which the user can enter the name of a website. Is it possible for it to be hyperlinked so that once the field is saved, if the user clicks on it, it redirects to the website?
I use Django for the backend and Javascript and html for the front end.
An input field's value is stored as plain text, therefore you cannot include HTML (i.e. a link) and expect the HTML to be parsed and functioning.
You could simulate this behavior with JavaScript, however I would recommend against it. (You would add a click listener, your function would pull the value of the field, see if it is a valid URL, and then open up the location.)
I'm not going to write the code for this because it would be a terrible user experience. The standard behavior for an input field is that you click on it to edit the text. This is an assumption your users have, and they would therefore (a) not think to click on it because they don't expect it to be a link, and (b) click in it if they wanted to edit the text, only to be redirected and unable to edit the text.
Alternatively, you could add a small button next to the input, i.e. 'Open' or 'Test' or an external link icon.
Simply, if you are printing the URL for the user on their profile page, sure you can just print it as follows:
<a href='$url'>$url</a>
That's PHP but of course you can do this in any language. I'm not sure if this answers your question since you ask if it can be printed "inside" the field which isn't possible/doesn't make sense.
HOWEVER, think about security. Remember the user can enter any malicious URL into this field, so you need to be aware of who you are potentially linking this to on your website/application.
Useful resources:
URL HTML field:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
Validate URL format with Django (does not check if malicious or not though):
How can I check if a URL exists with Django’s validators?

How could the programe locate the input-box of user-name and password on the html page exactly?

I'm trying to implement an function that auto-fill form(maybe,some page just input-box and submit button) with python and selenium.
It is similar to browser's auto-fill form: parsing the web page, locate input-box of user-name and password on a page, and auto fill them next time.
The problem is about how to locate the username input box or password input.
I look for a way which could handle most of page,but encountered several problems:
The user name and password of some pages are not in the form label;
There are not only user name and password entry box, but also have the verification code input box;
The name of input-box not only as "username" or "password".It maybe another word.So I can not judge by name of the username input box or password input box.
Some methods have been tried, such as:
Password input box with password attribute;
The user name input box is near the password input box;
But the effect is not ideal.
Is there any good method or suggestion? How does the browser do it?
Here its something difficult to answer your question because you do not mention any reference anyway I am giving your 2 example image where you can find the most efficient way to find XPath
Hope it will help you to find your Right XPath
There is no way to generalize a way to automate all web pages as far as I know,as elements in DOM vary in each and every page and so you need to change in xpath locator accordingly.I know its tiresome! uff..:-(
However do have a look into Sikuli and see if this can serve your needs.
Brief overview of Sikuli mentioned in their site:
Sikuli automates anything you see on the screen. It uses image
recognition to identify and control GUI components. It is useful when
there is no easy access to a GUI's internal or source code.
More info:
http://www.sikuli.org/

javascript error form validation: all inputs fields are cleared on submitting

am using a form to register the user on my website and i have a captcha security on it. Everything is working well and good but the only problem that i am facing is that if i enter a wrong captcha or somehow the page refreshes , all the data entered by the user is wiped out.
what i wish to achieve is that even if the captcha entered is wrong and the form is submitted , the form should have all the fields intact as the user filled in excluding the captcha field.
How can this be done? My form is html and by using javascript im validating it
Some browsers may be smart enough to do this, but if you want to make sure, the only way to retain data across a page reload/refresh (including form submission) is to keep it on the server, and/or put it in a cookie.
However, instead of using a submit button, you could use a normal button with an onclick() function which validates the data first, then manually submits the form if appropriate.
document.forms["form_name"].submit()
You also have to handle key events for the form text inputs, to prevent enter from submitting.
However, this is still much easier in the end, since it prevents the page from changing and doesn't require server side storage or cookies.

How do I determine whether data on a form has been input by the user or the browser?

I have a checkout form that will display a pop-up survey to ask why they haven't started filling out the form after 5 seconds. However, I need to be able to check whether the user has actually entered data as opposed to data entered by the browser's auto-fill feature (any pre-populated data set in the markup I specifically ignore in the javascript or jQuery).
Right now my solution is to have the setTimeout run a function which checks a variable (true or false) that is set to false on a jQuery .focus or .change event on the input types (input, select, textarea). However, since the javascript may load after the user is able to use the form elements, I have to check whether the user has entered data before the survey pops up.
Is it possible to differentiate between user-inputted data and browser-inputted data if the javascript loads after the user has done anything to the form fields?
If you really want to tell browser not to autofill it at all, you could use autocomplete attribute, but this is unfortunately an invalid attribute and thus will not validate. If you really need your HTML to validate, you can use jQuery to do just that for you:
$(your_form_selector).attr('autocomplete', 'off');
More discussion about autocomplete here
What about .keyup event for form?
var isFilledByUser = false;
$("#input").keyup(function(){
var isFilledByUser = true;
});
ok... this was mildly entertaining, but I definitely agree... this feature would be so annoying XD
http://jsfiddle.net/NTvrN/1/
but there you go... now type, foo!

Categories

Resources