Set values in fields created dynamically - javascript

have a simple registration form which can replicate the same N times for N inscriver people at once.
I have to set the values ​​of the VALUE field depending on selected SELECT option Participant independently for each registration form dynamically created option.
I tried several things but I can not make the event ( on change) fired from a given SELECT change only the value of that piece of form created in Javascript field.
I would like to create fields where SELECT fired an event that only alter its respective VALUE field according to the selected users in the SELECT option and that the trigger its SELECT, the VALUE field of the registration form to receive the value of the select value changed. I want this to happen independently created for all sections on the form .
I'm having the following problem, it seems that other SELECTS created dynamically follow the original select . Are not independent.
How can I fix this? The link below is the source code and the same
link: http://jsbin.com/lupeweha/5

I see you actually fire the event on the select by calling the "select" element, which then fires the same event on ALL the selects! Create ids, and then call your functions independently.
function bindSelect(){
$('select').on('change', function() {
....
// hey, here all the selects get this function, on change.
$('#main-select').on('change', function() {
...
$('#other-select1').on('change', function() {
...
$('#other-select2').on('change', function() {
Hope it helps.

Related

Trigger change event on page load

i have a form that shows/ hide fields based on the user selection. Below is the code that is used for a select field and it works fine.
$('#pager').off('change', '.form_field select').on('change', '.form_field select', function(e) {
load_all_options($(this), 'select', e);
});
I have the same function with different selectors like text and check box. Everything works fine during the change. But the problem is by default i have some fields populated, so on page load i need to trigger the change event so the relevant details are loaded properly..
can someone let me know the best way to do it?
Thanks
You could do with document.ready.create the array with selector names .Then join with , .its only trigger change event on particular selected element listed in array
const select_arr = ['.form_field select','.form_field input']// and use multiple select
$(document).ready(function(){
$(select_arr.join(',')).trigger('change')
})

Getting the Underlying Input Element of a Selectize.js element from one of its event handlers

This turned out to be a far more difficult task to determine on my own than I originally expected, but hopefully I'm just missing something.
I'm using Selectize.js for population of some fields within a form. The field sets are always the same (one text element initialized with .selectize(), and two other text elements with similar Ids. The selectize drop-down is populated via remote API calls and when an item is selected I have other fields auto-populated via selectize's onChange event.
The problem is that I want to retrieve a data attribute from the original textboxes that each selectize is initialized from inside the onChange handler to determine what additional fields should be populated. I cannot determine where to get the original element from because there is nothing in the API discussing this, and when debugging I cannot locate the actual element either.
Does anyone know how to get access to the underlying input element?
After some more digging using developer tools it turns out you can get the underlying input element with this from inside an event handler:
this.$input
Where $input is a jQuery object of the underlying element. Unfortunately, this is not in the documentation.
Usage:
$('.lookup').selectize({
onChange: function(value) {
var data = this.$input.data('stuff');
}
});

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()>

dojo Select box, triggering events on select

Hi I am using a dojo select, I have a text box where a certain ID is entered and then based on what is chosen on the select box an action is performed. Now the problem is, suppose over two different requests the action remains the same and the id changes I cant trigger the function with the onChange event. How do i handle this? Even if the user opens the select box and chooses the same item as last time I want the function i've written to be called.
onchange fires when any option is changed of the combo box.In your case you are not changing the options so obviously that event will not fired.
You can try onclick instead.
Write the same code in onclick for the select element (however with some intelligent logic since onclick will keep on firing even before you are able to select any option which may not expected in your case..!).

Setting a field based on a ComboBox selection

I'm not a newb to JavaScript but this is my first foray into Acrobat Scripting.
What I'm trying to do is change a text field based on the value selected in a comboBox.
Since I have many different comboboxes with the same set of options, and many text fields that are supposed to be bound to those, I would prefer a document scope function that could be reused for all of those.
I'm not sure if this is possible but here's what I'm thinking...
Detect when a combo box is changed. On the change event submission, take the export value from that and make it the value for the related text field.
Here's the steps:
capture combo box onmouseup event
detect which combo box triggered the event
match up the name of the combo box to its associated text field using an array listing
use a getField() to fetch the text field
set the text fields value to be the export value of the combo box
Any help with this would be appreciated. Especially good sources about Acrobat event triggers and how they work. I have been through a great deal of the API documentation and can't find anything on it.
Found it!
After exhaustive hours/days of Googling I finally found a solution that works.
The handler function needs to be bound to the 'Keystroke' event.
The handler function should contain:
if(!event.willCommit) {
this.getField('[field]').value = event.change;
}
Note: Where 'field' is the name of the field being updated and event.change is the value selected in the combobox.
To fetch the export value of the selection use the following:
if(!event.willCommit) {
this.getField('[field]').value = event.changeEx;
}
Apparently, 'Keystroke' is fired any time a UI element is interacted with. If you don't want it to execute when the document loads, be sure to bind the handler function to the event during the page load event.
Thoughts: AcroForms JS (Javascript for Acrobat) has a seriously broken event model. If you were to get the value of the combobox while using this even handler it would serve up a stale value. Not only does it take an obscure hack to make it work but there is little/no AcroForms JS community to provide answers to hard questions like these.

Categories