How can I use OnKeyUp to trigger a javascript over and over? - javascript

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.

Related

How do you extract variables from javascript for html web form

Okay I have seen script which I got from this site Adding input elements dynamically to form
I have made some slight changes to it. The objective of the script is to ask a user for an input and then supply them with number of fields. Assume the person puts in 3. I would then want to capture those three inputs as a list and export them to python. I am currently using cgi-bin and python. Those are parameters I have to work with.
How can I pull the elements from the web form using that script
Once I activate the addfileds function. I am unable to see fields in the form below it. I would like to have more than one dynamic fields.

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?

How to modify the value returned by form submit

Currently, I use a form with four select elements to ask the user the selection parameters (for Wordpress posts but this is not a Wordpress problem). Doing so, the normal submit of a form returns something like
some_url/some_partial_url?select1=val1&select2=val2&select3=val3&select4=val4
However, I would like the submitted string to look like this:
some_url/some_partial_url/tag/val1,val2,val3,val4
Up to now, I have managed to create and submit such a string using Javascript but I couldn't find out so far how to get rid of the "?select1=val1&select2=val2&select3=val3&select4=val4" part which is still appended to the returned submit string. Should I set or clear another form variable or is there another way to get rid of this appended part?
Please do not recommend any packages such as jQuery but only 'native' Javascript solutions.

How to add custom field to dhtmlxScheduler?

I want to add multiple custom fields to the lightbox in dhtmlScheduler. I realize that this is a dup of a prior question but that answer is incomplete/incorrect.
My application correctly stores and recalls data from a MySQL database using dhtmlxDataProcessor on the client and dhtmlxConnector via PHP on the server side. I have carefully read, re-read, and parsed documentation on Custom "details" form. I've worked with the code in the 05_custom_editor.html sample.
The problem is that those examples do not work - they silently fail to store the second field, "Details", in the Description section. This is not surprising since nowhere is the field mapped to a database column.
What changes are needed so the "Details" field of the example form stored in the database and recalled with the event?
What changes are needed to support read-only data in the Details field that is populate based on the "Text" field? What I'm thinking of is a name that has an address associated with it.
How to invoke a custom windows with a form from the lightbox to populate the address?
I would prefer to be able to do this by extending the default lightbox, but that is not a requirement.
Any guidance is appreciated.
There are 3 required fields when using dhtmlScheduler. They are the first 3 in your PHP connector:
$scheduler->render_table("my_table","id","start_date,end_date,name,details,....
Your connector may use any column names as long as the order is preserved. But because it's required and used all over the place the dhtmlScheduler must refer to the name of the event. It is called "text".
The lightbox section maps description on to "text". I think that there is no
scheduler.locale.labels.section_description
for the same reason.
1) Update the PHP connector to pull in the required fields.
2) You can use sched.formSection('myfield') to get components from inside the lightbox, then you can add javascript to blur on focus.
3) Normal javascript
You can use one of the custom events alter any form items before you display the lightbox.
My dhtmlScheduler seems very vocal when it fails! What does the console say? Have you stepped through to see where it's failing?

Prompt with hints in Javascript

I'd like to get some input from the user:
keywords = prompt("Input keywords separated by commas", "");
I have many various strings stored in an SQLite database that could suggest the user what to type.
Let's say you have an array or list of these strings. How would you code this hinting in Javascript? Are there some functions or code snippets for this functionality?
I'd like it to work similarly as here. When you start typing you get hint with possibilities. There is only one disadvantage, that you can't input more strings separated by commas. Here is this feature working with more strings.
Is prompt() function suitable for this purpose? You can use another way of getting user input.
Thank you
You cannot tweak the native prompt() javascript method.
I know you did not tag with jQuery but would be way easier to use a library to implement such a behavior.
You'll have to build your own dialog system using maybe jQuery UI Dialogs. They have an option to make it modal so the UI is blocked until the dialog is closed.
jQuery UI Dialog will not block javascript execution though like prompt does. You might need to be able to execute code when the dialog is closed. This answer show a way to implement that easily.
Finally, the jQuery UI Autocomplete provides an example on how to use it for multiple values in the same input. They use a comma-separator but I guess you could modify the example to work with whitespaces: jQuery UIAutocomplete Multiple Values
You can't really use any custom functionality with prompt().
You'd be better off creating an <input type="text"/> and hooking the whole thing up to a button, making the data get submitted whenever a use clicks it, or presses enter. Then code it to fetch an autosugges value whenever the user types in a new character.
You should take a look at jQuery UI's autocomplete component (it works with multiple strings as an input as well). You would also need to set up a server-side script that will take a possibly incomplete string as an input and output a possible list of matches back to the browser.

Categories