[Resolved] Conditional field-display not working, when changing value by jquery

[Author]

Posts

[dianaM-4]

In my post-creation-CRED-form, I have a dropdown-field for choosing the amount of children. Based on the value of this dropdown-fied "anfr-kinder", new fields are appearing for the input of the age of the children. So when choosing 1 children from the dropdown-field, only 1 field with the age-dropdown appears. When choosing 3 children, 3 dropdown-fields for age-choosing appear. I did this by adding a condition to the field itself (like in my screenshot).

That's all working fine in my CRED-form. But only when changing the number of children manually in the dropdown-field.

I also have a custom jQuery-code, which is changing the value of the dropdown-field when some other field outside the CRED-form changes. I tried both of the following codes:

… $(".anfrage select[name='wpcf-anfr-kinder']").val(MYVAR); …
… $(".anfrage select[name='wpcf-anfr-kinder']").val(MYVAR).attr("selected","selected"); ...

Both lines are working: The value of the dropdown-fields is changing to the new value. But the fields "age of Children" don't appear as they should.
What can I do, so that this is working also with programmatically changing the value?

[Juan Supporter Timezone: Europe/Madrid (GMT+02:00)]

Hi Diana

Thanks for the feedback.

I think we are very close, but there is one step that you missed.

You know, for dealing with events like a value on a select dropdown changing, we need to hook into this event, and do our conditional display when this event is fired. Natively, those events get fired when an action is done by a human user.

In your case, you are changing the select drodpown value, but you are not telling the dropdown that this has changed, so it should fire the event. So you will ahve to do it manually, and evenrything hooked into it will start to happen again, like the conditional display.

So you just need to do a small adjustment:

$(".anfrage select[name='wpcf-anfr-kinder']").val(MYVAR).trigger('change');

and you should be good to go. Also, notice that this event "change" is used for select dropdowns, but other kind of fields might depend on other events like "click" (for checkboxes and radios) or "blur".

Can you please check this out and tell me if that solves the problem? If not, we will try some alternatives.

Hope it helps.

[dianaM-4]

Thanks Juan,
that was quick and easy! 🙂 You solved my problem!
Nice weekend! Diana