We Keep Coding

Simulate a button on the keyboard being pressed, add the value of that keypress to text input

My objective is to be able to run a function that simulates a key being pressed on the keyboard, and then the value of that key being inserted into an input field. My reasoning for this is that I am using a js framework that automatically filters data based off of the input but it only filters the data when the input is typed in. Using document.getElementById('search_box').value will obviously populate the input with text. But doing this doesn't trigger the data to be filtered because the input text technically isn't typed in. So I was wondering if it was possible to run a function that would basically simulate keys being pressed and then inserting the value of those keys into an input field.
function populateField() {
document.getElementById('search_box').value = "mr"; //this needs to be changed to insert the value via keyboard
document.getElementById('search_box').focus();
}

According to filter.js's main repo's Issues #154: Can I trigger a filter programatically with jquery like $("#filterid").val("bla").change() ?
$("#filterid").trigger('change') will work. It also depend upon events: change, click etc
i.e
$('#searchbox').val("father").trigger('keyup')
In the example page , I used $('#searchbox').val("father").trigger('keyup') to add "father" to search and trigger a filter effect.

trigger function when javascript dynamically fills a form field

I'm making a long form with lots of calculations done with javascript.
I'm using onChange="myFunction();" on certain form fields to run calculation functions when necessary. This way, the user enters in a number and when they tab/click to the next field, it triggers a function which runs a calculation and dumps the result into another field.
The problem I'm having is triggering functions based on values that are placed in fields via another function. When the user types in a number, the function triggers and everything is fine, but when a function dynamically inserts a value into a field, onChange won't trigger a function. Likewise with onFocus and onBlur as the field never receives or loses focus. Is there a way to trigger a function from a form field when another function inserts a value into that field?

Javascript form validation, how do I enable a button and check details (more details inside)

Ok here is how my validation works
There are three text boxes. name | email | message.
Onchange of each of them runs a function that validates them and adds 1 to a counter.
functions are: email(), name(), message().
I have another function called CheckBut, which checks to see whether each of the text boxes has been validated by making sure the counter ===3. it then enables the send button.
WITHIN each function email, message, name i have {counter++, CheckBut()}
HERES THE PROBLEM: A user will enter the name right, and then click on the email field. This will then run the validation code for the name. They then enter the email and click on the message field, and this runs the validation code for the email field.
When they enter the message they cant click on the button becuase its disabled AND the function to validate the messgage field WONT run until they click somewhere else. HOW can I solve this? I was thinking of BLUR() but I dont know how to run make it work within the confines of my form.

I suggest you attach your listeners to onKeyUp instead of onChange. This will get them to run before the user clicks out of the text fields, which ensures that the send button will be enabled before the user tries to click it.
However, by listening to onKeyUp your validation functions will be executed many times and your counter will probably grow larger than 3 before the user even leaves the name field. To address this, I suggest you remove the counter variable and instead track the validity of each value using three separate boolean variables (e.g, isNameValid, isEmailValid, isMessageValid). Each validation function would simply assign a true or false to its respective variable. CheckBut() would then be changed to simply check that all three variables are true.

You may use onkeypress event for check field changes, and setTimeout for run validation if field not changed in last 3-5 seconds. Looks like this.
<script>
var validNameTimer = null;
function nameValidWait() {
if (validNameTimer != null) {
clearTimeout(validNameTimer);
}
validNameTimer = setTimeout(nameValid, 4000);
}
</script>
<input id="name" onkeypress="nameValidWait()" />
Fix
Replace onchage to onkeypress

You probably should not disable the button. Instead, run all 3 validations on button click event and if validation fail display an error message (optionally) and stop the execution (return). Error message can be shown in HTML element, or you can use alert(msg) function. Hope this will help. Best rgds, AB

What changes to DOM are made when MVC Validation triggers?

I have a form in a modal window that is currently performing some validation.
(I am using ASP.NET MVC, JQuery UI, ajax forms, data annotations and unobtrusive is active)
When this validation triggers I have noticed so far that it does a few things:
1: my validation summary gets it's class changed from .validation-summary-valid to .validation-summary-errors
2: my invalid inputs have a class added to then called .input-validation-error
3: my validation messages get their class changed from .field-validation-valid to .field-validation-error
But there is something else that it is doing and I cant work out how it is tracking this.
I have a textbox that is required, before triggering the validation i can select inside this box, then select another box and the validation will be silent.
But as soon as i trigger the validation by clicking submit with an empty textbox, i can select the textbox and type something to remove the validation instantly, but if i then null it and select a different box this error is re-applied without re-submitting.
So my question is: what has changed, how does it know that I have attempted to submit already?

When validate is called, it adds a class to each input/select that is supposed to be validated. When the input/select is not valid it adds a class to the input/select:
class="input-validation-error"
When it is valid, it adds:
class="valid"
Validation only fires on the control when you change the value, not when it loses focus.
Validation fires on change, even before you submit the form. Take a required textbox, add a value to it, and tab off ... then go back and remove that value, and you should see the textbox highlighted red.

javascript and dynamic data

I'm using Dynamic Data 4 on my project.
In a template field there's a button that modify (via javascript) the value of the databound input field.
The button modify the input box value correctly but when the input field get the focus his value it's resetted to the previous value. The same happens when saving the form. If the input box previously received input from the keyboard the value it's correctly stored.
Is that behaviour to be considered normal with those premises? There's a way to avoid it?
Thank you very much.

The problem was caused by the presence of an associated asp:TextBoxWatermarkExtender who resetted the value when the (originally null) textbox got the focus.