We Keep Coding

Programatically set controlled form values from a Chrome extension

I'm trying to write a Chrome extension that makes the process of uploading to various social media platforms a little smoother.
This requires being able to set form inputs such as the Title and Description on, for example the IGTV upload page . I have tried to do this with javascript such as document.querySelector('input[placeholder="Title"]').value = 'My New Title' and this appears to work.
However if you then 'focus' on the inputs once my code has filled them in, they revert to being empty again. I expect this is because they are being controlled by some frontend React code that is not being altered by my code.
Can you please suggest a way for me to set these inputs with my code in a way that the frontend framework will detect?

Chrome Autofill on ASP.NET Partial Postback (Update Panel)

I understand there are many questions and answers surrounding autocomplete and autofill for web browsers. I haven't seen this specific issue raised.
UPDATE: the autofill specifically happens when a partial postback executes inside an update panel
Recently, (chrome versions 70+?), Chrome has begun aggresively autofilling input fields in our webapp when a partial postback is executed. (We use asp.net web forms)
We use the partial postback to dynamically load a user control and add it to the DOM inside an update panel.
Specifically, inputs like the following simple snippet are being populated with an email:
<input type="search" class="newH4" placeholder="Search">
I've tried adding the autocomplete attribute with different values to no avail.
Here is a screenshot of the autofill:
Additionally I have other fields like entering a dollar amount which gets populated with the email as well. Is there a way to prevent this on the latest versions of chrome?

If you have a password field in your form you can add this attribute -
autocomplete="new-password"
<input type="password" placeholder="Password" autocomplete="new-password">

autocomplete="off" should be working, but in lieu of that working and given that it is not a password or email, you could feed it some random string to see if that helps
For example autocomplete="rjftgh"

Note: simply changing the autocomplete attribute to a random string, or even a special one like 'new-password' does NOT work for this issue.
Ultimately I found a solution. It is more of a hack so I'm not too satisfied with it, but it comes from Mike Nelson's answer to the following question: Disabling Chrome Autofill
His solution involves adding input elements with their display property set to 'none' above the inputs that are being autofilled. The idea is that these hidden fields absorb the autofill instead.
I did also learn a bit more about the problem with ASP.NET and Update Panels as well. When the Update Panel triggers a partial postback, it uses an AJAX library. The library contacts the server to complete the update. Whatever AJAX is doing in the background, it is also triggering chrome's autofill logic to reexecute. In other words, whenever I dynamically add a user control, the first input field in that user control's html structure was being autofilled with the user's stored email.
Again, very strange and bad behavior, but the display 'none' input fields did the trick.
If Chrome changes their autofill logic again (they will), I'll update my answer with hopefully a better solution.

Logging in to the Netflix website using JavaScript

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?

problem with window.open command

I am working on a simple javascript program that searches for a wine review on one or several websites based on which sites the user is interested in.
My problem is that the window.open command only opens the first website chosen by the user and seems to be unable to open the others. Also, after scrolling through the urls of the sites listed, I get an error message saying: 405 - Method Not Allowed
You can check the program out at: http://www.divinocards.com/search_engine_4.htm
I have spent several hours trying to figure out why the program is stalling as it is. I have used the debugger and it seems that all values are being correctly assigned. It's is just that I am unable to open multiple windows. It doesn't seem to be an issue with pop-up blockers either as I temporarily disabled those.
Any help would be greatly appreciated.
Sincerely,
OB

Change the type attribute of input from submit to button (for input with name="Find" and, in fact, all inputs that you use through JavaScript exclusively, i.e. not doing a real submit to server).
More details - your form doesn't have an action attribute. Take a look here:
http://www.w3schools.com/tags/tag_input.asp
What happens in your current code when you click on "Find" button is that you are doing a submit to an unknown location. As per the standard:
http://www.w3.org/TR/html401/interact/forms.html
this attribute is required (look at section 17.3 The FORM element).
The details in the section also explain why it redirects to "nowhere":
action = uri [CT]
This attribute specifies a form processing agent. User agent behavior for a value other than an HTTP URI is undefined.
So, at the end it's up to a specific browser to decide what to do here (an implementation detail, not something you want to rely on).

If you just want to open a target window, you can remove your <form> tag , and add a click event to the find button.
Set <input> tag's type attribute to button can't prevent form submit by use press enter in the text field
You can also disable onsubmit event of the form.
like
document.forms[0].onsubmit = function(){return false;}

Call a JavaScript method after the RequiredFieldValidator fires?

Is it possible to fire a JavaScript method after a form element is considered invalid? Here is my scenario:
There are 2 tabs on the ASPX page. The user has to fill out info on both tabs. The user, while on tab 2 clicks the submit button. However, there is a required field on tab one that needs attention. Do I need to create a custom valuator (either a CustomValidator control or create a new control from the base valuator) to call a JavaScript function to display tab 1 and show where the error is?

Unfortunately, the canned Field Validator controls in ASP.NET Webforms are not very extensible. I've had needs to change the CSS class of an input field to an invalid state upon client-side validation, and I never found a good way to handle this.
I think your best bet might be to do your own client-side validation. I've also looked into this third party product and it seemed to be pretty fully-functional, but I couldn't justify the cost in my case: http://www.peterblum.com/DES/Home.aspx

You can call any js function from your server side code after the validation check on page object and inside the js function you can write the logic to highlight the field which has issue on validation:
if(!Page.IsValid)
{
Page.ClientScript.RegisterStartupScript(typeof(Page), "validate", "myjsfunction();", true);
}
else
{
// type code here
}