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.
Related
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.
I'm playing around in the Chrome Dev Tools console and I noticed that when I physically click a checkbox with my mouse and when I call $('input.checkbox').prop('checked',true), the end result is aesthetically the same but not in the back end.
For example let's say there's a form that submits the user's gender. If I click the checkbox next to 'Male' and hit submit, the system'll record the change, but if I were to call $('input.checkbox#male').prop('checked',true) and hit submit it doesn't record the change in the back end.
Does doing it programmatically not change the state or is there something on their end that specifically was done to forbid changing the state programmatically?
That is most likely because event listeners onClick, onChange and friends are only triggered on user actions, not when you change some state programmatically.
The actual form data that gets submitted should be the identical, though, no matter how you arrived at setting the form input values, and how you trigger the submission. In your case, maybe you have some event handlers setting some hidden fields?
There's likely a click or change listener that does something necessary before submitting the results. Try using $('input.checkbox#male').click() instead of $('input.checkbox#male').prop('checked',true)
If I have a required field on my form within my MVC3 page, and try submitting the form, the validation fires and the input control is given a light-red background color (fill) and it also shows a validation message. If I type in the input control, it will detect the value and remove both the coloring and validation method. This is how it should work.
In my case, I have mailing address fields, most of them required. I have an option on my site to select an address in a drop down list. When an address is selected by the user, all the address fields filled in using client side javascript. However, when I do this, my validation message and color aren't going away. So I need to somehow force the validation check.
How is this done?
Thanks in advance.
The reason validation fires for your inputs is because they hook up to your change, focus, blue, keypress, etc events. For a scenario of where you fill the fields in with script you'll need to specifically call each element that had it's value populated. The reason for this is because the change event will not be fired. Just select the element with jQuery and call the valid method on it for jQuery Validate. The valid function will force validation on the element when called.
jQuery Validate Valid Documentation
Example
$("#mySelect").change(function() {
$("#myElement1").val("Some Value");
$("#myElement1").valid();
});
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 been looking for an elegant solution to converting a submit button to a button. In Internet Explorer you cannot simply change the type of an input. I couldn't change the attribute on a clone of the object either, so I thought I would manually duplicate it by creating a new object and then iterate through the attributes of the submit button to duplicate them. I am checking if the attribute is specified before setting it, but for some reason the value attribute reads as attrib.specified is false despite having a clear value. Why is this?
Update
I want buttons (<input type="input"...>) to submit when I don't have javascript turned on, and I want to execute javascript instead of submitting when javascript is turned on by way of changing the input type to prevent postbacks and to attach event handlers. I have considered replacing the buttons entirely but I would like to be as consistent as possible for the sake of styling, hence switching to button from a submit type, and I want to preserve everything else associated with the submit button, i.e. style, value etc. I would like to just do submitButton.type = 'button', but MSIE does not like this for some rather obscure reason. I hate wrestling with MSIE.
iirc IE will submit the text between the button tags, rather than its value attribute.
I believe a workaround is to burn down microsoft HQ.
You could use a hidden field, or a type=submit and add text to the button with an image.
What are you trying to achieve?
I suspect noscript tags are the best way to get around the lack of js on the client side. I would just rather have found a solution where js added functionality to an existing page.