URL params and dropdown dependencies

Hi,

The javascript code you have included in the ticket is incorrect. Could you send me the URL to your webpage to check the code in detail, please?

Best regards.

Hi,

sorry, I cant share the link in public. But the code works as long as the selection doesnt have dependencies:

<select id="fieldname1_1" class="field depItemSel medium valid" name="fieldname1_1">
<option class="depItem" vt="Red" value="Red" selected="">Red</option>
<option class="depItem" vt="Blue" value="Blue">Blue</option>
<option class="depItem" vt="Green" value="Green">Green</option>
</select>

(function () {
jQuery('#fieldname1_1').val('Green').prop('selected', true);
})()

Hi,

Please, don’t use texts with the format: “fieldname#” because the plugin replaces them by the corresponding fields values. Follow the steps below:

1. Assign a custom class name to the field: “fieldname1” (through the attribute: “Add Css Layout Keywords”), for example: myfield

2. Modify the equation as follows:

(function(){
jQuery('.myfield option[value="Red"]').prop('selected', true);
})()

Best regards.

Thanks, but this is something Ive already tried without success.

Still: the value gets selected properly but selecting an other value doesnt work as long they have dependencies on them. It always jumps back to “Red” (or whatever value is selected in function).

Hi,

In this case the code included in your ticket does not correspond with the feature you want to implement.

Could you describe exactly the behavior you want implement in the form, but describe it using the real names of fields in your form, and their values, please?

Best regards.

Hi,

ok. I′ll try my best ?? The values are just exemplary but the principle stays the same:

First Selection: Field Type “Dropdown”. Class = “category”:

Choose your category: (every value has a dependency: if choosen display sub selection)
– Shoes (preselected)
– Food
– Movies

Now there′re sub selections for every category:

Sub Selection “Shoes”: Field Type “Dropdown”. Class = “shoes”:

Choose your shoe:
– sneaker (preselected)
– boots
– high heels

Then I have a calculated field for my function:

(function(){
jQuery('.category option[value="Food"]').prop('selected', true);
})()

What happens is that in my category selection the value “Food” gets selected properly and my sub selection “Food” gets also displayed properly. When I now try to change the value in my category selection to “Shoes” or “Movies” the dependency fires properly so that my sub selections “Shoes” or “Movies” gets displayed. But the value “Food” stays selected in my category selection.

Hi,

I’m sorry, but that makes not sense, my question is:

Why are selecting one option in the “Category” list from an equations? Why not allow the user select the preferred option? Using the code in equation, you are forcing an option. To preserves the normal flow, allows to the user select the preferred option. However, if you want to select an option by default, you simply should select this option from the field’s settings, and not programatically.

Finally, if you want select the option programmatically, and force to display only the dependent fields, the code to use would be:

(function(){
jQuery('.category option[value="Food"]').prop('selected', true);
jQuery('.category select').change();
})()

If you need additional help implementing your project, we can offer you a custom coding service.

Best regards.

The sense is, that Im building a coupon-form. There are links on other pages where the user can click an offer (“use as a coupon”). There Im setting url params to have the coupon-type preselected:

https://www.domain.com/coupons/?category=Shoes&shoe=boots

Ive set up a test page where you can see the behaviour:

Test

Hi,

In this case, please, follow the steps below:

1. Remove the calculated field.

2. Insert a “HTML Content” field.

3. Enter as the content of the “HTML Content” field, the piece of code:

<script>
fbuilderjQuery(document).one('showHideDepEvent', function(){
jQuery('.category option[value="Food"]').prop('selected', true);
jQuery('.category select').change();
});
</script>

and that’s all.
Best regards.

Hi,

thanks, now the reselection works but then my set dependencies wont work. I think I′ll write my own dependency.

Just one last question: How can I use external scripts without writing them into html fields or hidden equations? I′m no expert in JS so I dont really understand why my external functions doesnt work.

Is there something like if (fbuilderForm) is loaded do my stuff ?

Thumbs up for your support!

Hi,

If you call the change event after modify programmatically the values of fields, the dependencies rules should be evaluated, however, if you want evaluate the dependencies manually, include the following piece of code as part of the equation:

fbuilderjQuery( document ).trigger( 'showHideDepEvent', 'cp_calculatedfieldsf_pform_1' );

If you want to define your own functions in a JS file, you simply should store the file with the Javascript code into the directory: “/wp-content/plugins/calculated-fields-form/js/fields-public”, and uncheck the checkbox to use the cached copy of javascript files, in the settings page of the plugin.

Best regards.