Hide and Show fields

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 be adval[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.

https://www.mein-gebuehrenrechner.de/ebay/

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 the getField, IGNOREFIELD, and ACTIVATEFIELD 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.