trigger function when javascript dynamically fills a form field - javascript

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?

Related

Fill out input field with code doesn't trigger onChange functions

I am working on customJs for swagger.
There I want to fill out an input field in advance for my use case.
Basically I can't see the code attached to the input field generated by swagger, but I can fill the input field with inputElement.setAttribute('value',"some stuff" )
But this does not trigger function as it seems, because when I proceed to use the submit button, it says the field is empty, only after I MANUALLY typed a letter and removed it, it recognized my changes.
Can I somehow trigger whatever the underlying function might be?

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.

Change color when form changes

I have a form with multiple textboxes inside a table.
Also inside the table but outside the form there is a cell (said Cell A).
When you first access the form, texboxes in the form are filled with data from a DataBase using php/MySQL.
You can change the textbox values, and submit them to the database with POST. The Database is updated, and you are returned to the same (but now updated) form.
My issue: I want to appear in Cell A a colored text indicating if the data in the form was sent or not. On first arrival to the page or after update in should read "Actualized data" in green. But when you are changing the form without submitting it should change to "Unsent data" in red (or something like that).
I know how to format the text with php
style="color:<?php echo $ColorChange ?>"
but when the form changes (before submitting) I need OnChange and some JavaScript, for example
function ChangeColor()
{
var col=document.getElementById("UpdateSign");
col.style.color="#FF0000";
}
My problem is how to combine those two. Any ideas?
Keep Javascript event triggers outside of HTML elements, and use event listeners. jQuery makes binding event listeners to elements very easy.
For example,
$("#form_input_element").on("onchange", ChangeColor);
takes in the id of the form element and binds the ChangeColor function to the onchange event.
use the onchange event of the body, i suppose this should work. I dont know your complete code so this is more guessing than knowing.
<body onchange=ChangeColor()>

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

How can I catch a change event from an HTML text field when a user clicks on a link after editing?

Our webapp has a form with fields and values that change depending on values entered. Each time there is a change event on one of the form elements, we use an expensive AJAX call to update other elements on the page.
This works great for selects, radio buttons and checkboxes. The issue comes in when a user adds content to a text field, and then clicks a link without taking the focus from the text field. The browser moves to a new page, and the contents of the text field are never saved. Is there an easy way to code around this? The AJAX call is too expensive to call with each key press.
Here's an example of my Prototype code at the moment:
$$('.productOption input.text').invoke('observe', 'change', saveChangeEvent);
Have you considered hooking into the window unload() event? Here is a c/p jQuery example using .unload().
$(window).unload(function() {
var input = $("#MyInput"); // Text field to check for
if(input.length > 0)
{
//Ajax call to save data, make sure async:false is set on ajax call.
}
});
This lets you work around making a call on each key press, by making one if they leave the page.
using prototype, you can have a PeriodicExecuter listen while you're typing and sending off an ajax query when nothing has happened for e.g. 2 seconds and value has changed since the last AJAX request. Start the executor using a focus event and shut it down using a blur event, that way you only need one executor at a time

Categories