I have a dynamic form that updates based on user selected values.
One particularly input field (type number) I calculated a default value for and update. But if the user every selects their own value, I want to respect that and not re-calculate the default as they continue filling out the form.
What would be the best way to detect a user input vs my programs input?
I thought about onclick events but want to respect if they use the keyboard to enter. I thought about an on change event, but since my program recalculate the value frequently that won't work.
I found this answer that has ideas for C# fields Determine If Changed Event Occurred from User Input Or Not
I found this answer that talks about using the input event - Detecting input change in jQuery? - which seems like it could work but would fire on every key stroke which seems less than ideal.
What do you think if you set a "keydown" event on the input. And if your script changes the value than you just use "element.value = "Foo"?
Here's an idea that doesn't require hefty code interventions or a large number of event triggers: add a focousout or blur event (whichever fits the needs of your page better) to your input which, when triggered, will take the input's value and compare it to your calculated default. If different, it would mean the user has selected a different value. You could then store the user's value in a hidden element (a simple span will do the trick).
Next time you recalculate your default, you could check if your hidden element has any content and then not replace the value in your input. Or you could check the content of the hidden span containing the user's input before you run the recalculation and avoid it altogether.
That would be a solution that does not change the user interface. If possible, the simplest solution would be adding a checkbox that allows the user to define their own value.
Related
The auto-suggestion list provided by the DHTMLX Combo is updated on every keystroke but apparently uses prefix-matching only. How do I change the logic to match anywhere in the option's text.
E.g. in the below fiddle:
https://jsfiddle.net/wra8etjw/2/
I would like the suggestion for "Three" to show up even when I type "ee" in the box. I've read the documentation on custom filtering but neither the custom filtering approach nor the user-defined function got me anywhere.
I am using a DHTMLX Combo box in a rudimentary way. Namely the options are present as a literal in the HTML file served from the server (they are pretty static), so the onDynXLS is never fired (there's no Ajax going on).
My other idea was to capture the current value that the user is typing, save it to some global variable and then provide a user-defined filtering function that would return true on all values in which the current value is present (not just as a prefix). This also failed as apparently the user-defined filtering function is only called on page load, not on every keystroke inside the input text. Moreover, I don't know which even to use to capture key strokes inside the Combo's input text and obtain the current value.
So my questions are:
how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?
how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
Unfortunately such feature is not available without the modification of the dhtmlxCombo source code
or you should use the server-side filtering mode, so you will be able to use the onDynXLS event solution.
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?
You may try to use the "onKeyPressed" event:
https://docs.dhtmlx.com/api__dhtmlxcombo_onkeypressed_event.html
how to make the list of suggestions show values where the current text exists as a substring anywhere in them, and not just as a prefix?
Use enableFilteringMode('between')
how to capture keystrokes in the Combo's input text and obtain the current value as the user is typing?
Easiest way IMO is to attach a handler in the underlying input element the Combo uses.
Updated fiddle here
I have an application with an input field that takes a dollar value. I need to change the way this dollar value displays so that the number is formatted with a $ and commas, like $5,550.00 if the user just enters 5550.
I found a way to do this, but doing so causes all hell to break loose in the code that uses the value from this field--it does a bunch of stuff, including database updates that break if given $5,550.00 instead of 5550.
There is a TON of underlying code and I am not empowered to go fix it all. I need to figure out a way to display this value to the user as $5,550.00 but keep the underlying value as 5550.
Any suggestions?
Use 2 text inputs. A "façade" one that the user sees, and a "real" one which is actually submitted to the server with the form. When the user enters text into the visible input, you can use JavaScript to set whatever corresponding value you want into the "real" (hidden) input. That effectively decouples the displayed value from the submitted one. You can even use a plugin such as jQuery Masked Input to do the front-end number formatting for you.
Make sure to only apply this when JS is enabled in the browser, otherwise your form will be broken with JS disabled.
If you are talking about an HTML form, I would submit the form using javascript.
You could revert the value back to unformatted before submitting the form.
I'm writing a program to auto fill form blanks in the web pages. With javascript I can deal with normal blanks like username input and passwd input. But when it comes to cascade select, like some web pages asking you to input your address info, there's 3 selects: choose country, choose province and choose city. The content of the second menu is loaded upon the onchange event of the first one, so as to the third select.
I'm wondering how to auto fill these 3 selects, given that I've already known the value for each one of them. Could any one help?
The following code seems not working:
document.getElementById("selProvinces").value='11';
document.getElementById("selProvinces").onchange();
document.getElementById("selCities").value='113';
document.getElementById("selCities").onchange();
document.getElementById("selDistricts").value='1190';
You might have a few problems here.
In some browsers, calling .onchange() won't actually trigger the event. See this answer to How do I programatically force an onchange event on an input? for more details.
If the page you're filling in is ajaxing in the next lot of values in the cascade, 'selCities' might not contain the value 113 just yet. You could set a timeout and poll periodically to see if 'selCities' has some values in it before setting the value
It might not actually be the onchange event that they're using for the cascading. The oldschool way used to be onclick. They might be doing it onblur. Possibly silly, but worth peeking at the source to make sure :)
I have some form fields like <input>, <textarea>, <dropdown> etc.
If a user make a change in any form field it should be prompted at once that field is changed.
I applied different events like onKeyPress (did not work for backspace key), onChange (works when lose focus).
Is its not possible in simple/plain JavaScript then I want to know it in Dojo.
see stack question: Detect all changes to a <input type="text"> (immediately) using JQuery
while the accepted answer is using jquery setInterval works just fine with javascript. just use GetElementByID or GetElementsByTagName to get your input fields and then just check their values against themselves.
There is no HTML "dropdown" element, you probably meant a select.
For some controls you can compare a control's current value to its defaultValue to see if it's changed, pick whatever event suits for the control. For select, onchange is best and compare to the previously selected option (if there was one). Input and textarea you can likely use keyup. Radio buttons and checkboxes click and compare with the one that was checked previously (if there was one).
Through javascript attach event onFocus on input field. Onfocus setTimeout() and make it recursive. If any content will change, it will notify. In my case it works; even I did another task from it. I save existing input field value on page load. e.g it was abc on page load. User change it to abcd then there will be a message for unsave changes. But when user delete d and make it abc again then message will disappear, means there are no unsaved changes.
I'm creating various input fields dynamically using prototype js. Everything looks nice and cool and the fields are appended properly in the right place.
The only problem is that the field's tabbing order is messed up ...
When inside a textfield pressing tab doesn't switch focus to the field immediately below it.
Instead it gives focus to inputs that existed before the new fields were dynamically added ...
Is there a clean and simple way to reset the field's tabbing order to the regular one, i.e. the one that would switch to the field immediately after in the DOM .
Note : this annoyance occured on Firefox 5.0. I didn't test it on other browsers yet.
You can manually set the tab index. The issue here is that the logical order of fields any given HTML does not always match the visual order of those fields in the browser. So writing a script to automate this may not always work.
According to W3C forms,
Those elements that assign a positive value to [tabindex] are navigated first
... Elements that have identical tabindex values should be navigated in the order they appear in the character stream.
So give all the dynamic fields the same value of 1 and they will be tabbed before any other field (which have an equivalent value of 0) in the order they are added to the document.