The “Calculated Fields Form” plugin, like WordPress, uses the jQuery framework. In this tutorial I’ll explain:
- How to select a field in the form with jQuery?
- How to select a choice from the DropDown field?
- How to check a radio button?
How to select a field in the form?
Each field in the form has associated a name with the format fieldname#, but in the equations, the texts with fieldname# format are replaced by the fields values. So, would be needed to use an alternative way for selecting the field into the equations. I will use the classes names.
First, you should assign a custom class name to the field that will be selected into the equation. The custom class names are assigned to the fields through the attribute: “Add Css Layout Keywords”. For this blog, I will assign to the field the class name: myclass
– For selecting an input field (Number, Text, Date, Calculated Field, Radio Buttons, Checkboxes, Password, Phone, Hidden), uses the code: jQuery(‘.myclass input’)
– For selecting an DropDown field: jQuery(‘.myclass select’)
– For selecting an Textarea field: jQuery(‘.myclass textarea’)
How to select a choice from the DropDown field?
In the previous section has been explained how to select a dropdown field: jQuery(‘.myclass select’), but how are selected its choices? The choices can be selected by their indexes, or values.
How to select the choices by their index?
The first thing you should know is that the indexes of the choices start in zero, the index of first choice is “0”, the index of second choice “1”, and so on.
Suppose you want select the first choice of the DropDown field, in this case you can use any of the following instructions:
jQuery(‘.myclass select’).prop(‘selectedIndex’, 0);
or
jQuery(‘.myclass select’)[0].selectedIndex=0;
How to select the choices by their values?
If you know the values of the choices, and you want select the choice with the value: 3, you can use any of the following options:
jQuery(‘.myclass select’).val(3);
or
jQuery(‘.myclass option[value=”3″]’).prop(‘selected’, 1);
How to select a Radio Button choice?
Similar to the DropDown fields, the radio buttons can be selected by their indexes, or values.
How to select a radio button by its index?
Similar to the DropDown fields, the indexes of radio buttons start in zero, the index of first radio button is “0”, the index of second is “1”, and so on.
Suppose you want select the first radio button, uses the snippet of code:
jQuery(‘.myclass input’).get(0).checked = true;
How to select the radio button by its value?
If you know the values of radio buttons, and you want select the radio button with the value: 3, uses the following snippet of code:
jQuery(‘.myclass input[value=”3″]’).prop(‘checked’, true);
Finally, to use any of previous codes in an equation, use the following format:
(function(){
jQuery(‘.myclass input[value=”3″]’).prop(‘checked’, true);
})()