Hide and Show fields
-
Hi, I want to know how to hide or show one field that is dependent on other two fields? The other two fields have dropdowns. So, I want that if I select sepcific options from these two other fields, it would hide or show that third field
-
Hello @asjad492
My apologies, but that is exactly the reason why I tell you in a previous entry that you need some basic JS knowledges to implement complex equations.
If you declared adval? as an array
var adval = [0, 0, 2.75, 0, 0, MIN(fieldname33 * 0.03, 150), 1.5, 0, 0.35];
you must access its items with[]
symbols. The()
symbols are used for calling functions.So, this code is invalid
adval(k)
the correct would beadval[k]
Hi, the jquery script you advised to put under script tags in html worked perfectly when I click on preview the form. But as soon as I inserted in blog post and published it, it isnt working.
Hello @asjad492
The problem is simple. The form preview contains only one form, but there are two forms on your page. So, pieces of code like
getField('fieldname40')
without the second parameter specifying the form object generate ambiguities. The ambiguity only affects the use of the getField in the “HTML Content” fields. In the equations, the plugin can identify the form that evaluates it.Note the ambiguity would affect pieces of code like this one when both forms include a fieldname40, fieldname16, or fieldname39 field:
jQuery(document).on('change', '[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]'
A solution would be transform pieces of code like the following one (in the content of the “HTML Content” field fieldname47):
<script> fbuilderjQuery(document).one('showHideDepEvent', function(){ // Trigger a change event on elements with an ID attribute that contains "fieldname40_", "fieldname16_", or "fieldname39_" jQuery('[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]').change(); }); // Add an event listener for change events on elements with an ID attribute that contains "fieldname40_", "fieldname16_", or "fieldname39_" jQuery(document).on('change', '[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', function(){ // Call the IGNOREFIELD function on several fields IGNOREFIELD('fieldname14'); IGNOREFIELD('fieldname42'); IGNOREFIELD('fieldname43'); IGNOREFIELD('fieldname44'); // Use an if statement to test whether certain conditions are met if(AND(getField('fieldname40').val(true, true) == 'Basis-Shop', getField('fieldname16').val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39').val(true, true) == 'Ja')) { // If the conditions are met, call the ACTIVATEFIELD function on a specific field ACTIVATEFIELD('fieldname14'); } else if(AND(getField('fieldname40').val(true, true) == 'Top-Shop', getField('fieldname16').val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39').val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname42'); } else if(AND(getField('fieldname40').val(true, true) == 'Top-Shop', getField('fieldname16').val(true, true) == 'Auktionsangebot', getField('fieldname39').val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname44'); } else if(AND(getField('fieldname40').val(true, true) == 'Basis-Shop', getField('fieldname16').val(true, true) == 'Auktionsangebot', getField('fieldname39').val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname43'); } }); </script>
Into this one:
<script> fbuilderjQuery(document).one('showHideDepEvent', function(evt, form_id){ var f = fbuilderjQuery('#'+form_id); jQuery(f).on('change', '[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', function(){ // Call the IGNOREFIELD function on several fields IGNOREFIELD('fieldname14', f); IGNOREFIELD('fieldname42', f); IGNOREFIELD('fieldname43', f); IGNOREFIELD('fieldname44', f); // Use an if statement to test whether certain conditions are met if(AND(getField('fieldname40', f).val(true, true) == 'Basis-Shop', getField('fieldname16', f).val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39', f).val(true, true) == 'Ja')) { // If the conditions are met, call the ACTIVATEFIELD function on a specific field ACTIVATEFIELD('fieldname14'); } else if(AND(getField('fieldname40', f).val(true, true) == 'Top-Shop', getField('fieldname16', f).val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname42', f); } else if(AND(getField('fieldname40', f).val(true, true) == 'Top-Shop', getField('fieldname16', f).val(true, true) == 'Auktionsangebot', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname44', f); } else if(AND(getField('fieldname40', f).val(true, true) == 'Basis-Shop', getField('fieldname16', f).val(true, true) == 'Auktionsangebot', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname43', f); } }); jQuery('[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', f).change(); }); </script>
I moved the code into the “showHideDev” event handler. It receives the form’s id as its second parameter. I used it to get the form object
var f = fbuilderjQuery('#'+form_id);
and then I passed it as the second parameter in thegetField
,IGNOREFIELD
, andACTIVATEFIELD
operations. Additionally, I used the form object in the following pieces of code to handle only the events of the fields belonging to the form, or trigger the onchange event of these fields:jQuery(f).on('change', '[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', function(){
and
jQuery('[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', f).change();
Best regards.
Hi, this still doesn’t work:
<script> fbuilderjQuery(document).one('showHideDepEvent', function(evt, form_id){ var f = fbuilderjQuery('#'+form_id); jQuery(f).on('change', '[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', function(){ // Call the IGNOREFIELD function on several fields IGNOREFIELD('fieldname14', f); IGNOREFIELD('fieldname42', f); IGNOREFIELD('fieldname43', f); IGNOREFIELD('fieldname44', f); // Use an if statement to test whether certain conditions are met if(AND(getField('fieldname40', f).val(true, true) == 'Basis-Shop', getField('fieldname16', f).val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39', f).val(true, true) == 'Ja')) { // If the conditions are met, call the ACTIVATEFIELD function on a specific field ACTIVATEFIELD('fieldname14'); } else if(AND(getField('fieldname40', f).val(true, true) == 'Top-Shop', getField('fieldname16', f).val(true, true) == 'Normales Angebot (Jetzt kaufen)', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname42', f); } else if(AND(getField('fieldname40', f).val(true, true) == 'Top-Shop', getField('fieldname16', f).val(true, true) == 'Auktionsangebot', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname44', f); } else if(AND(getField('fieldname40', f).val(true, true) == 'Basis-Shop', getField('fieldname16', f).val(true, true) == 'Auktionsangebot', getField('fieldname39', f).val(true, true) == 'Ja')) { ACTIVATEFIELD('fieldname43', f); } }); jQuery('[id*="fieldname40_"],[id*="fieldname16_"],[id*="fieldname39_"]', f).change(); }); </script>
Hello @asjad492
Please, edit the line of code:
var f = fbuilderjQuery('#'+form_id);
as follows:
var f = jQuery('[name="cp_calculatedfieldsf_id"][value="12"]').closest('form');
Best regards.
So, this one worked. But now the issue is when condition of fieldname14 is satisfied, it does not activate. other fields mentioned in code activate fine when condition is satisfied. But in preview mode, the form still works fine for all fields.
Hello @asjad492
I indicated how to modify the code in one of HTML Content fields on your form, but you have multiple fields with similar code. So, you should edit the rest of fields.
Best regards.
- The topic ‘Hide and Show fields’ is closed to new replies.