Hello @projectmas
I checked your form, and you are showing and hiding the fields by pressing some buttons. Please, edit the on-click event of the “Diskon” button (fieldname8) as follows:
jQuery('.field-diskon').toggleClass('hide-strong');if(jQuery('.field-diskon:visible').length){jQuery('.field-diskon').closest('.cff-container-field').find('.column3').addClass('column4').removeClass('column3');}else{jQuery('.field-diskon').closest('.cff-container-field').find('.column4').addClass('column3').removeClass('column4');}
Best regards.
can you help me for 3 default and add until 5 coloumn?
the default is 3 columns, when I press discount, it will change to 4 columns, then I press “PPh” so that it becomes 5 active columns.
Hello @projectmas
I’ll try to describe the process with a generic example.
Assuming you have assigned a custom class name to some fields in the form (Ex. class-a), and you have three buttons in the form: button 1, button 2, and button 3. And finally, you want to distribute the fields with class-a in three columns when the user presses button 1, four columns when he presses button 2, and five columns by pressing button 3.
The onclick event of “button 1” would be:
jQuery('.class-a').addClass('column3').removeClass('column4 column5');
Onclick event of the “button 2”:
jQuery('.class-a').addClass('column4').removeClass('column3 column5');
And the onclick event of “button 3” would be:
jQuery('.class-a').addClass('column5').removeClass('column3 column4');
Best regards.
does the code work for an example like this?
I have 3 buttons
Button 1, Button 2, and Button 3
when I click the button randomly without closing the button, it will be like this:
The default is 3 columns, then I randomly click the existing button, then the column will change to 4,
When I click another button randomly(again) then the display will be 5 columns..
of the 5 columns earlier, I will close one of the buttons that I clicked earlier, then the display will be 4 columns..
then when I click the button randomly again, the display will be 5 columns..
I hope you understand what I'm saying
Hello @projectmas
Yes, that’s it. In my example, button one will distribute the fields in three columns. No matter if they were initially distributed in four or five columns. Button two will distribute them into four columns, and the third button will apply five columns.
Best regards.
wait.. i asum in new page https://tools.web.id/test/
here I use the 5 column setting, but only 3 columns appear / active.
The arrangement of the existing columns is as follows
Unit-Price-potongan(hide-strong)-diskon(hide-strong)-total-PPN(hide-strong)
because I use the default 5 columns in the settings, the column size is small, even though the default that is visible is 3 columns..
i want when it shows 3 columns, then the size is according to the usual size of 3 columns in the calculated field form,
when I randomly click the button(potongan/diskon/kepo), it will be 4 columns, and will have a size like 4 columns
and when i click one of the remaining 2 buttons, it will be 5 column, and the size will be like 5 column view
Hello @projectmas
If you initially have three fields visible per row, I recommend you select the “3 Columns” option in the container fields. And then implement the onclick event of the buttons as I have described in the previous post.
Best regards.
jQuery(‘.field-diskon’).toggleClass(‘hide-strong’);if(jQuery(‘.field-diskon:visible’).length){jQuery(‘.field-diskon’).closest(‘.cff-container-field’).find(‘.column3’).addClass(‘column4’).removeClass(‘column3’);}else{jQuery(‘.field-diskon’).closest(‘.cff-container-field’).find(‘.column4’).addClass(‘column3’).removeClass(‘column4’);}
for 5 column in single line, which part should i change?
jQuery(‘.field-diskon’).toggleClass(‘hide-strong’);if(jQuery(‘.field-diskon:visible’).length){jQuery(‘.field-diskon’).closest(‘.cff-container-field’).find(‘.column3’).addClass(‘column4’).removeClass(‘column3’).find(‘.column4’).addClass(‘column5’).removeClass(‘column4’);}else{jQuery(‘.field-diskon’).closest(‘.cff-container-field’).find(‘.column4’).addClass(‘column3’).removeClass(‘column4’).find(‘.column5’).addClass(‘column4’).removeClass(‘column5’);}
like this?
-
This reply was modified 3 years, 7 months ago by
projectmas.
Hello @projectmas
I’m sorry. I don’t understand your code.
A preferred solution that does not require checking the visible fields would be the following:
1. Insert an “HTML Content” field in the form, and enter the following piece of code as its content:
<script>
function update_columns() {
jQuery('.cff-container-field>fieldset>div').each(function () {
var container = jQuery(this),
visible = container.children('.fields:not(.cff-container-field):visible').length;
console.log(container);
if (visible)
container.find('.fields').removeClass('column3 column4 column5').addClass('column' + visible);
});
}
</script>
2. Now, edit the buttons code as follows:
jQuery(‘.field-diskon’).toggleClass('hide-strong');update_columns();
And that’s all.
Best regards.
Hello @projectmas
There is a typo in the code I included in the previous entry. The correct one is:
jQuery('.field-diskon').toggleClass('hide-strong');update_columns();
I visited your form again, and it does include the recommended code.
Best regards.
can add code to return the size when button is pressed twice?
when clicking into 5 columns, the code runs perfectly, but when clicking again to hide the columns, the size doesn’t return to the proper size
Hello @projectmas
I don’t know where you are testing the code, but the form you sent me as a reference (https://tools.web.id/faktur/) does not include the recommended modifications.
I tested it directly through the browser console. Please, watch the video by visiting the following link:
https://resources.developers4web.com/cff/tmp/2022/10/15/video-columns_o.mp4
Best regards.
sorry bro..
I tested here https://tools.web.id/test/
sorry bro, it’s my bad. i tested up to 6 columns, while the code only for 5 columns,
now everything is ok. Thank you very much
