I'm trying to write a wrapper for the Netflix web page in Qt using QWebEngine so that I can use my remote control to navigate. For those who didn't know, the Netflix website can't even be navigated using the arrow keys...
So, anyway, I have used QWebChannel to inject some JavaScript code into the web page, and can (visually, at least) modify the relevant elements:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByName("password")[0].value = "%2";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
This actually works (I can see the fields filled with what I provide for %1 and %2, and the button is pressed programmatically), except for one crucial issue: this results in the messages below the input forms telling me "Please enter a valid email." and "Your password must contain between 4 and 60 characters.". These tell me somehow just setting the HTML elements' values doesn't have the same effect as me manually typing in the values. Could someone help me figure out why this doesn't work, and how I can make it work? I would like to restrict myself to plain JavaScript, it seems like a simple enough task to achieve without e.g. jQuery or some other Javascript library.
I understand this is a terrible way to approach the whole Netflix-on-a-HTPC thing, but I don't want to go digging through e.g. Flix2Kodi's Python to figure out what they are doing (which seems to me is a lot more susceptible to bad breakage than the end result I'm aiming for).
The input field for the email uses some sort of HTML5 and ReactJS validation mix.
However it seems like ReactJS validation cant handle the the dynamic value change, so I tried to find a way to deactivate it, which I did not directly, but I guessed that it has to add some sort of event handler to the form so I came up with this:
var validatingForm = document.getElementsByClassName("simple-login-form")[0];
var nonValidatingForm = document.getElementsByClassName("simple-login-form")[0].cloneNode(true);
validatingForm.parentNode.replaceChild(nonValidatingForm, validatingForm);
which gets rid of all event handlers and therefore ReactJS's validation. Now you can set your value using your code:
document.getElementsByName("email")[0].value = "%1";
document.getElementsByClassName("btn login-button btn-submit btn-small")[0].click();
Note that HTML5 is still validating the inputs, so you have to provide an E-Mail Adress, if you want to get rid of that too set the input type to text before changing the value:
document.getElementsByName("email")[0].setAttribute("type", "text");
However the next page after the Button click asks for the password so you'll have to provide it there as I didn't find a way around this.
Buuuuuttt could you not have saved the password in your browser, let it do it's autofill work and fire the click event only?
Related
So, we have an existing app, which I think is built on sapui5 if I am not mistaken. It's pretty much a simple search function app. I reviewed the DOM and noted that the search box form has the ID of #__xmlview0--searchField-F, and the search box container including all is under #__xmlview0--searchField and the actual text entry area is under #__xmlview0--searchField-I. Essentially, it looks something like this - highly simplified:
<div id = "__xmlview0--searchField">
<form id = "__xmlview0--searchField-F">
<input type = "search" id = "__xmlview0--searchField-I" />
<div id = "__xmlview0--searchField-search"></div>
</form>
</div>
There are two pages that I am interested in, one is the original start page for searching, and the other is the search page with results displayed, which also contains the same search box so that users can quickly perform another search. Lets call these start page and results page.
Since the app doesn't seem to take any QS for search strings, I was wanting to create a nested page where I can simply pass on the elements of searching into the app generated page, and display search results with one click, instead of having the users need to do them manually and transcribe things from one place to the search function.
I have attempted initially to simply change the value of the search box and then submit the search:
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-F").submit();
Such approach did not work. It appears that the submit will execute for the start page, but will not for the results page. But even with the start page where submit executed, the search text of "SOMETHING" has been lost for sure somehow. So I tried typing in text manually and only doing:
$("#__xmlview0--searchField-F").submit();
Which seems to show the submit button working (also only for start page, not for results page), though it appears that "SOMETHING" is still lost somehow even though I manually entered the text when executed in start page. Thinking something may be wrong with clicking the submit mechanism programatically, I tried only doing:
$("#__xmlview0--searchField-I").val("SOMETHING");
and then manually click the search execution icon (also tried pressing "enter"). But to my dismay, despite the DOM display the changes for the input search field properly, the search did not execute though the button blinked so I am sure I properly clicked it at least.
So I thought, maybe I need to trigger some kind of event before I start making changes to the search field to prompt proper event execution behind the scenes so that the input text will be recognized properly when changed:
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-I").val("SOMETHING");
$("#__xmlview0--searchField-I").focus();
$("#__xmlview0--searchField-F").submit();
But that did not work either. I am pulling my hairs out trying to figure out what may be going on. Can someone who knows the SAPUI5 stuff give me some insight? Am I doing something that is simply not possible under this environment?
I'm working on some forms for a Website. Currently I have the usual HTML Browser check (with "required"-tag and patterns and stuff in the inputs), I check the values in a JavaScript before submitting and I do a server-sided check of the data after submitting.
Everything works fine, even if I have only one of them enabled, but it seems a little bit overkill to me, so my question is if I can just leave the Javascript check out? Of course I need to keep the server chek :D
Looking forward to your answers!
You must always validate input at serverside. Javascript is optional and it just to make life of your users easier. Your users get better experience. That's it.
All modern browsers support the HTML5 form field attributes. As you are using those, you may skip the JS validation.
To expand a little on the current answers:
Server side validation is always required, you mentioned that.
HTML and Javascript validation are used for different things.
The HTML required tag can be used to check a form's fields are not blank before a form submission.
Javascript validation allows you to be far more flexible with what you want to validate and when. However, it requires more work because it's not as simple as a required tag.
With Javascript you can do far more. Some examples:
Validation that occurs as soon as a user starts to type
Have the box highlight a different colour
Show an error message
Have a big red cross appear next to invalid fields or a big green one next to valid ones
Spin your page around when the user enters something invalid. (don't actually do that)
etc.
Also note browser support for the required tag.
First time asking a question here so please be gentle... I use a set of perl script (no judging please) that are great for simple flat file database creation, updating and searching (www.ezscripting.com/csv). I have used these scripts well beyond the intended uses including being able to display data using a javascript to call the data.
What I'd like to do is have a form field that searches a specific field in the database, let's say . What I'd like to do is allow a visitor to start to type in the search field and have the OnKeyUp event handler trigger a javascript call that will pull up to 5 entries in my database.
Is there a way to have OnKeyUp in an input field tag trigger an embedded javascript each time a new letter is typed?
There's an example here
that uses AJAX to do what I think you're trying to do.
I ran across a site where during registration, the input field for the nickname won't let me type in more characters and/or change focus to a different input field, while it is using a jQuery AJAX call to check if the nickname is available.
Just for fun I decided I want to get to the bottom of it.
I thought this would be an easy task but I was wrong.
I can't seem to find what causes it using Firebug.
How can I see all events that are bound or get fired off when I type something?
Background
I'm using POST form submissions instead of links with concatenated arguments inside a Web application, so I can exercise control over input.
Unfortunately this means users can't use the quick shortcuts they know to open links in new windows, like control-clicking or middle-clicking.
Problem
I've got what seems to be a workable way to use jQuery to capture mouse input and the various chord keys, based on the W3C DOM mouse events specification:
$("span#clickspan").click( function(event) {
buttonpress = event.button;
ctrlpress = event.ctrlKey;
$("#clickresult").empty();
$("#clickresult").append("<p>Click!</p>");
$("#clickresult").append("<p>Button # " + buttonpress + " pressed!</p>");
if (ctrlpress) {
$("#clickresult").append("<p>Control-click!</p>");
}
//form submission code would go here
event.preventDefault();
}
);
I can capture control-clicks this way (tested in Firefox 3 and IE7), and it correctly (?) reports left-clicks as coming from mouse button #0, but for some reason this code still isn't capturing middle-clicks on the span, and right-clicks still pop up the context menu. I'd like to capture middle-clicks, at least.
Can somebody help there?
What "control" means
The problem with a GET submission/link with concatenated arguments is that anybody can edit the address bar and type in anything. I've already worried about authentication and validation server-side. That's not why I want to work with POST.
I should only be showing users information that's meaningful. Internal database IDs aren't. I should only be letting users interact with the application in meaningful ways. Arbitrarily editing the address bar isn't one of those.
People make typos all the time. From the system's perspective, though, there's no difference between a typo in the address bar and a flaw in the application logic, and I'd rather not push the responsibility for deciding which one just happened off onto the users.
Short answer? Can't do it.
Long answer? Javascript mouse events. Still can't do it.
This begs the question: do you need to use POST or do you simply want to? The only reason why you'd need to is query string length. As to wanting to, you mention "controlling user input". What does that mean exactly?
You should never ever ever rely on the browser for input validation. You can do it there as a convenience but the server should always validate input.
Or is the reason aesthetic (ie shorter, "nicer" URLs)?
You're reinventing the wheel that is hyperlinks. I'm just trying to make sure you have a pretty darn good reason for doing so because it's counterproductive and you're never going to get the same browser support and compatibility as actual hyperlinks. Plus you're likely to simply annoy your users by having things they expect to work not work. Not good.