Develop Reference

Click button and get text with CeFSharp

I'm creating a program in vb.net to go to https://www.royalmail.com/track-your-item#/ and:
Enter some text in the Reference Number box
Click the button 'Track your delivery'
Grab the text from the page so I can search for the delivery date
I've had to switch to using CeFSharp, as the microsoft browser doesn't want to load the page, so this is my first time with it.
This is what I have so far (CWB1 is the name of the browser object):
CWB1.LoadUrl("https://www.royalmail.com/track-your-item#")
CWB1.LoadUrl("javascript:void( document.getElementById( 'barcode-input' ).value='12345678' )")
Dim script = "var pagebutton = document.getElementById('submit');
pagebutton.click();"
CWB1.ExecuteScriptAsyncWhenPageLoaded(script)
The page loads, the text '12345678' is entered in the search box, but running the script to press the button does nothing.
I can't figure out how to press the button. I thought it must be the wrong id, but inspecting the web page seems to give button id="submit" so this should work? I've tried a few variations but nothing seems to move me forwards.
I also then need to grab the text from the page - not sure how to so this either?
Thanks for any help!

OK, I've found that the button press only works if you enter the text in the field via sendkey event. So the button press code was working after all - I guess the site's security is trying to make sure someone is typing the text in, instead of a robot. Thanks for your help with this amaitland!

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.

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.

Form Field Input One After Another

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

Clean and accesible Other option (Check box and text box)

When I have a set of either check boxes or radio buttons I often need to have an Other choice. This check box or radio button is very often accompanied by a text box where the user is supposed to fill out what this Other is.
How do you usually handle this set up? What kind of markup do you use? What do you require in your validation? Do you use java script for anything? For example:
How do you make the form accessible? Do you use and how do you use the label tag, for example.
Do you connect the check box and text box in any way with some javascript? For example, do you activate the text box when the check box is checked? Do you check or uncheck the check box automatically if the text box is filled out or cleared?
Do you let validation fail with error messages if the check box is checked but the text box is not filled out, or if the text box is filled out but the check box is not checked? Or do you just consider it not filled out and not checked?
Very unsure how to best deal with this issue, so any advice and examples are most welcome c",)

Typically when I have dynamic forms, I insert the input dynamically. That is, in the case of jQuery, I'll use .append('<input...') or some other similar function to actually insert the elements, and id it (or class it, depending), so that it can be easily .remove()-ed if the user decides they want to use another option instead. Validation is either handled via an onClick on an input button. If I'm feeling feisty, I'll go the AJAX route, and skip the <form> altogether.
I would definitely let the validation fail. They want "Other", and you want to know what "Other" is. If you don't care what Other is, then don't bother with the input box.
Edit: Might look something like this.
$('input[type="radio"]').click( function() {
if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
$(this).after('<textarea name="other"></textarea>');
} else {
$('textarea[name="other"]').remove();
}
}
The click will react to any radio being clicked, and the if will make sure that it's only the "other" radio button that will react to the click, and that it will only react if there isn't already a textarea after it (so you don't get multiple textarea propogations).
On the processing side of things, you'll have to do a validation at first to see if other was checked, and to grab the input of the textarea if it was. You should probably use server-side validation for that.
Hope that gets you started.

I usually enclose my radio buttons in a label like this:
<label><input type=radio value=xyz name=stjames>Saint James</label>
this way the user can click on the text to trigger the button.
When deciding how to behave, I usually say to myself "what do you think the user expected when they did that..." and that often gives me the answer. So, upon click or Focus of the text box, turn on the radio that goes with it. This won't work if you've disabled the text box!
( ) US ( ) UK (*) Other [________________]
If the Other choice is a dangerous one (deleting data), though, I'd disable the text box until the user explicitly clicks Other. Then, the Radio drives the Text Box instead of the other way around. You want the user to have to go through another step in this case. It depends on the situation - think about what'll happen in each case.
I usually try to make it impossible or annoying for the user to do something 'wrong'. EG disable the OK button if something is inconsistent. Or, select the Other radio when the user types in text. If there's text in the text box but the radio buttons are set to something different, I'd usually just ignore the text. But if it's a serious/dangerous situation, you want to make sure the user's made up their mind; if you delete the text when the user chooses a different radio, that might piss them off but it might be appropriate if they should be careful.