I have a form with some input fields and all those fields have onchange triggered callbacks (which can be different depending on the field).
My problem is that when the form is submitted the focus is still on the last modified field and the onchange callback is not called for this field, which can lead to submit wrong values.
I am looking for a way to force the triggering on the onchange event for the last field modified but I can't determine which element it is from my submit function.
How can I achieve this ?
Try this
$focused_element = $(':focus');
if($focused_element.is('input')){
$focused_element.trigger('change');
}
Related
IN SHORT: Is there a javascript function or hook to trigger an update to a Gravity Form so that the conditional logic is executed?
ORIGINAL QUESTION:
I'm using Gravity Forms and I have created an "on change" event
$('#gform_1').find('.gfield_date_dropdown_month select').change(function () {
var month = $(this).val();
$('input#input_1_6').val(month).change();
});
After this event I would like Gravity Forms to check/update the form so that the "Conditional Logic" is being executed to related fields.
I have checked the hooks on https://docs.gravityforms.com/category/extending-gravity-forms/hooks/javascript
but I can't find a hook that I can use for this purpose. Any ideas?
UPDATE:
The field that is changed (#input_1_6) is "hidden". This seems to be the problem. When I make this field visible it does work! So a change to a "hidden" field does not seem to trigger the update to the form. If I would have a function that would trigger this update I could add it to my jQuery function.
Some background information on this issue. I want a field to become visible when a certain month is selected in a date field. Since Gravity Forms does not support "Conditional Logic" based on a date field I want to update a hidden field with the "month value" and then use that value for the "Conditional Logic" on a related field.
Gravity Forms conditionals are triggered with the click or change events, depending on the type of field. You can manually trigger the change event with the .change() method.
Note this isn't working because the conditional isn't tied to the field you attached a change event to, so you have to trigger .change() on the field that does have conditionals. Assuming field 1_6 is the field that triggers conditionals:
$('#gform_1').find('.gfield_date_dropdown_month select').on('change', function(){
var month = $(this).val();
$('#input_1_6').val(month).change();
});
Some other small notes, consider using .on('change', function(){} instead of .change(function(){} as it will trigger on dynamic elements - as well as you don't need input before #input_1_6 since it's already a unique element.
Cheers!
I have a form that uses jQuery validation, using unobtrusive validation to declare rules. Currently I'm using the default submit behaviour where there is no validation on blur until the form is submitted (validating every field in the form), after which subsequent blurs validate just the blurred field.
I'd like to change this behaviour so that after a submit, blurring a single field revalidates the entire form, so that the error summary remains on screen until every issue has been addressed. The behaviour before submit should remain the same.
I've tried the following onfocusout methods based on other SO answers, with no luck:
onfocusout: function(element, event) {
$(element).valid();
}
and
onfocusout: function(element, event) {
this.element(element);
}
Both this.element(element) and $(element).valid() are for triggering validation on a single element. In your case, since you're trying to apply this inside of the options of the .validate() or .setDefaults() methods, you cannot use .valid() as it could potentially trigger an infinite recursion.
That leaves .element(). However, as per the docs, you can only use this on a single field, not the entire form.
How to validate the entire form on field blur instead of just the blurred field
I'd like to change this behaviour ... blurring a single field revalidates the entire form
The solution would be to write an external blur event handler attached to all relevant input elements and trigger the .valid() method attached to your form. Edit the selectors in this generic example for whatever is applicable to your particular form.
$('#myform input[type="text"]').on('blur', function() {
$('#myform').valid(); // <- trigger validation on entire form
});
$('#myform input[type="text"]') selects all text inputs within #myform
$('#myform') selects theformbased onid="myform"`
Came across a code in which the submit() event has been applied to the input field in the form.
Something like:
$("#foo").click(function(){
$("#formID input").submit();
})
where "#foo" is a dynamically created list element. Does this submit only the input field and not the entire form?
Since it is being called without any arguments, it will trigger a submit event.
This will bubble and trigger any submit event handlers on that element and any of its ancestors.
It will not trigger any native submission of data (that would require the method to be called on a form element).
is there a possibility to check if form values has changed in ExtJs?
Thanks
myForm.getForm().items.each(function(field){field.on('change',function(f,n,o){alert('detected! '+f.label+' value changed from '+o+' to '+n);});});
In the above snippet, what you are basically doing is -
Iterate over all fields in the form (myForm.getForm().items.each())
For each field, add a change listener. (field.on(...))
When a field's value is changed, the listener will be invoked with the field info and old and new value.
In the listener, change the alert with the appropriate logic.
I need to submit just one input field value to a cgi script via a web form.
I've added a couple of extra form controls (a check box and radio buttons) which manipulate the input value depending on the states selected.
When the form is submitted, the extra form field values are submitted as well which breaks the cgi script (which I don't have access to). I removed the 'name' attribute from the check boxes so they are not submitted but cannot do this for the radio buttons as it breaks their grouping.
How can I prevent radio button values from being submitted?
You can add a disabled attribute to them in the submit handler, this will prevent them from being serialized, either by jQuery or a normal <form> submission. For example:
$("#myForm").submit(function() {
$(this).find(":radio, :checkbox").attr("disabled", true);
});
Or you can .serialize() only the elements you want, for example:
$.post("myPage.cgi", $("#myForm input[type=text]").serialize());
Make them "unsuccessful". There are several ways to achieve this:
http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2
It is also possible to have two different forms: one that has visible form elements and one that has a hidden input that represents the end result to be submitted. You can either attach onchange handlers to your visible form elements so that they call some JavaScript to update the invisible field, or you can run a function as part of the onsubmit handler to set the invisible value directly before it is submitted.
Here's a jsFiddle demonstrating the second approach (the onsubmit handler): http://jsfiddle.net/gtU4J/