Form Field Input One After Another - javascript

I am creating a form wizard that guides the user through each form element, showing a tooltip describing each element. What I am trying to accomplish is:
Keep each form field disabled, excluding the form field the user is currently filling out.
When the user wants to continue onto the next field, they need to click on the tooltip for the field they're currently on. Also, the field needs to be non-empty to advance.
I have the tooltip appearing correctly, and it vanishes upon click. What I can't figure out is how to say in JavaScript code: "Has the user entered data into the current field and clicked on the tooltip to advance? Okay, then continue onto the next field until we've reached the submit button. Otherwise, stay here on the current field."
Here is my code:
function prepareForm() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++){
if (i !== 0){
inputs[i].disabled = "disabled";
}
// Make sure the tooltip tag is present...
if (inputs[i].parentNode.getElementsByTagName("span")[0]) {
inputs[i].onfocus = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "inline";
}
// When the user has entered information and clicked the tooltip, continue onto the next field.
inputs[i].parentNode.getElementsByTagName("span")[0].onclick = function () {
this.parentNode.getElementsByTagName("span")[0].style.display = "none";
}
}
}
}
window.onload = prepareForm;
I've tried entering other logic in the onclick function, but because it gets executed at any time, I don't have access to the inputs array. Any help on how I can accomplish this would be really appreciated. Thanks!

As you said that you are comfortable with jQuery,I created this fiddle for you.As i dont know how are you showing the tool-tip,let me know if mine is not the one you are using.This example can help you start and add your own requirements.

I would not recommend this. You are changing the default behavior of forms... with little or no benefit for the end user.
In addition you are forcing the users to do additional work between fields clicking on non-form field elements.
This fails basic usability and will only confuse users. On a side note, if you haven't read "Don't Make Me Think" by Steve Krug please check it out at your earliest convenience - it is chock full of eye opening details about why "inventing" new UI concepts is often a bad idea.
Update: So I think its only fair that I provide a different recommendation based on the information given about this form being very much a hand-holding exercise.
Thus based on the need to control input field by field, I think the only way to do so in a usable way would be to provide this as a wizard, one field per page. There are some added benefits to this in that if a decision is made in an early step that negates the need for a future step it can be omitted completely.
As a result I envision a form where there is a Previous/Next button at the bottom of each step (where applicable... e.g. step 1 would have no previous). The Next button would start disabled and only enable itself when the user has put input into the field on that page. When each step is shown, the focus should automatically be put into the field to enable quicker entry.
If possible, a progress bar or % complete indicator can be added to give the user a better understanding of how many steps remain.
Pros/Cons to this approach.
Pros:
The user does not need to click anywhere to enable a valid transition to the next field
No fields are disabled causing user confusion (except the Next button which is expected)
The user can focus on the one field that matters at that moment (e.g. phone number) and there is plenty of room for instructions/help
If step 1 is asking for say "Gender" and the user selects "Male" then step 6 that asks if the user has ever been pregnant can be skipped/auto-answered
If the user wants to go back they can
The user can't "accidentally" get to the next field without filling out the previous field
The user will be familiar with this style/behavior of wizard, this is fairly typical of many wizards/installers
Cons:
User can not see all questions at once
User can not enter field values out of order
User can not simply tab from field to field thus the overall form will be slower for advanced users vs. a single form

Related

Fetching and storing data from form fields (email, password) without user clicking a button using Angular, Javascript

I am newbie to Angular and Java-script and trying to figure the following problem. I would appreciate any inputs.
I have 2 fields in our div class. One of them is a form entry (email) and other one is a drop down menu which has some static values of "occupation" where a user can select one from it. Both of them are in the same row.
I want to repeat this row (for second entry) as soon as the user finishes typing the valid email address in first row/entry. Also I want to store the values of first row in an array that is in the controller.
I want to do same thing for second entry and so on.
Once the user hits "OK" at the bottom, I want take an action on the array that has all the above values. I have the action defined and it works for a single entry but I am unable to figure out 2 things:
How can I store values of each row/entry in an array without user clicking any button but just on the event of completing typing the email address?
How can I automatically create a new row when user finishes typing the email on previous row? Is ng-repeat a good option?
Any help would be much appreciated. I just want to get started in right direction.
You should consider, that email addresses can be prefixes of each other - or at least that most of the regular expressions checking for validity of an email address will already allow "a#example.c" and not wait for the complete ".com".
Besides that, from a user perspective I would like it more to at least press enter to commit my inputs.
The best thing to do is probably to create the new line when you start to enter something in the previous one and just let the user decide when to switch to it (by clicking or hitting the tab key). When he or she enters something there you can then submit the data from the current line.
To check if the email address is valid you can use input type email in angular[1].
<input type="email" ng-model="user.email" name="uEmail" required="" />
[1]https://docs.angularjs.org/guide/forms

Get User Comments from a Prompt Box also on Cancellation

I am building a HTML application (with Javascript, CSS). It is an user-interaction based application. I have a requirement where the user gets a prompt box with option to enter his/ her comments and to either accept (OK) or reject (Cancel) the action. When the user accepts (OK) i can read the user-comments. However, I also want capture the user comments when the Cancel button is pressed.
Most of the examples which I saw (either using custom box or window.prompt) only read the inputs on OK but nothing on cancel. Also as per window.prompt definition it does not read the comments box on cancellation. How can this be achieved?
if (alertInfo.indexOf(checkString) > -1){//check if a string is present in the message
var showPrompt = window.prompt("Please enter your remarks", "");
if(showPrompt != null){
userAccepted(showPrompt);
}
else{
sendRejection();// This is where I also need to read the user comments
}
}
else{
//reload the page
}
You're trying to misuse the feature. Cancel means cancel, not "OK but do something else". That's why you can't do this.
You'll have to find another way, such as rendering your own <form> to obtain the comments.
As #Lightness Races in Orbit said, you simply can't do it with the windows prompt. You have to make a floating div and make it visible instead of the windows prompt.
You can have radio buttons that requires the user to accept or decline, a text box to enter comments and a single OK button to close the dialog ("basically hiding the DIV").
Instead of a floating div, the user was directed to a new page where he / she could enter the inputs and either accept or reject the action. The advantage of having a separate page is that the user does not have to zoom-in / out the page to properly view the contents.
Thanks.

How to disable Sharepoint textbox?

I am trying to disable a textbox in SharePoint WSS3 and force a specific value (given by another JavaScript function) but I can't seem to find the right way of doing it. I have come across different issues. Let's say I have a normal single line text value named prova and another one named Description. Description is required, prova is not.
First Issue: If the field IS required, even if there is something in the textbox, SharePoint says otherwise and does not allow me to insert the entry.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='Description']").attr("disabled", "disabled");
$("input[title='Description']").val(value);
});
Second Issue: If the field IS NOT required SharePoint doesn't say anything but it inserts a blank value instead of the one given.
$(document).ready(function(){
//var value = someFunction(...);
var value = "test";
$("input[title='prova']").attr("disabled", "disabled");
$("input[title='prova']").val(value);
});
I have a feeling that tells me that there is some kind of SharePoint JavaScript function somewhere that listens for KeyUp or something. I have really no idea what to do now...
EDIT: It looks like the problem is related to disabling the textbox, if I comment the line where I disable the textbox it works in both scenarios. Maybe if I catch the insert request I can re-enable the textbox before SharePoint do the actual post. No idea how to do it though...
Your problem really is related to disabling the textbox first. By default disabled textboxes are not contained in the POST request in IE.
See this post: Disabled form inputs do not appear in the request or this one: how to save data by disabled text box?
What you actually want to do is set the readonly attribute of the field, not disable it (readonly="readonly"). The problem with that is that the readonly state sometimes looks the same as the default state, so you also have to add some CSS to make it look greyed out.

Creating a pop-up alert

Im doing an assignment where I have to create a form where the user can enter multiple values... values in a text box as well as choosing 1 option from a radio button. I need to create an alert that shows the user their choices.. I have found a way to create an alert but it only allows me to 1 value... see below
var username=document.getElementById("yourname").value;
var toAlert="Thank you "+username;
toAlert=toAlert+", have a good day";
alert(toAlert);
but like I said, it need the alert to indicate multiple values. Simply adding additional "+blahblah" does not work... I hope this question makes sense...
I also need to know how I can get the user's radio button selection in the pop up as well...
create field called e.g. secondfield
var username=document.getElementById("yourname").value;
var secondfield=document.getElementById("secondfield").value;
var toAlert="Thank you "+username+", have a good day. Second field: "+secondfield;
alert(toAlert);

rails/css/jquery - highlight text behind element when element above it(with opacity:0.001) is selected

I have password field on the page, where password shown is masked but I wanted users to copy the password in its clear text form and be able to paste it somewhere in another website.
I followed this article Mask text, but still allow users to copy it and created another input[type=text] field with opacity 0.001 and made this fields adjustment such that it overlaps with the password field
Now when users tries to copy password from password field, they are actually copying from another input field value whose opacity is very low.
But now I want to make users experience good when selecting password, because currently when copying users dont know whether the value is getting copied or not because they copying from another input field which is overlapped with another.
So I am in search of any css/jquery trick which will highlight the text(password asterisk) present behind the actual field(with opacity 0.001). So that users at-least come to know that their values is actually getting copied.
Thanks,
Dean
Are you really sure you or your users need this or is this meant as a convenience feature? No password field that I have seen allows to copy. Unless advertised, the number of people using this feature will be close to zero. Maybe a “copy password” link with ZeroClipboard is a better solution?
Anyway, here’s the best I could come up with. It uses jQuery-textrange plugin to handle text selection across browsers. It needs rather recent versions, too. jsfiddle demo.
The main idea is to make the low-opacity field ignore mouse events, so the user can select text in the password field normally. The advantage is that we don’t need to handle selection rendering at all. This can be achieved by CSS:
#account-password-hide { pointer-events: none; }
Next, once the user finishes a selection we get the selection position and select the same portion in the low-opacity field. Unfortunately, this will clear the selection in the password field.
$("#account_password").select(function () {
console.log("moving selection to hidden field");
var pos = $("#account_password").textrange();
$('#account-password-hide').textrange('set', pos.start, pos.end);
$('#account-password-hide').css("pointer-events", "auto");
});
CTRL+C works now, and so does right click → copy because we set pointer-events: auto. If it were still none, then a right click would go into the actual password field, preventing the copy operation.
Lastly we need to reset the pointer-events so that the next click goes into the correct field again:
function reset() {
$('#account-password-hide').css("pointer-events", "none");
}
$('#account-password-hide').mousedown(function (evt) {
// allow right clicks
if (evt.which !== 3) {
reset();
}
});
$('#account-password-hide').mouseup(function () {
reset();
});
$('#account-password-hide').blur(function () {
reset();
});
As far as I can tell, this basically works.
In order to keep the selection on focus change, you’d have to create an additional element that holds the same characters as the password field (i.e. same look as the asteriks/dots in the password field). Then you can highlight the selected characters using CSS system colors. Getting z-index and opacity for each of them right is going to take some testing though.

Categories

Resources