Button onclick new fields shown

  • Resolved kovbal79

    (@kovbal79)


    4 years, 6 months ago

    Hi,
    I need help with a calculator setup on the link (use 12345 to view to the page).
    I added a button to show next row of fields with an onclick event (saw in another support thread).
    I added 4 buttons, I want to have 5 rows of fields – each added with one button click.
    I added this code to buttons:
    jQuery(‘.button-1,.button-2,.button-3,.button-4’).addClass(‘hide’);jQuery(‘.button-1’).removeClass(‘hide’);
    Each with the new button number.
    I want the buttons to disappear after the new row appeared, so I also added class to the buttons, button-2 to the first button, and so on, thought it would work this way, but after clicking button-2, button-1 appears again (I understand why, but I can’t work around it). Also, button-3 doesn’t even work – although it is built the same way as its predecessors.

    It would also be good, if one button would do the whole thing, and wouldn’t need new ones for each row of fields, but just couldn’t figure out how.

    THanks in advance!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author codepeople

    (@codepeople)

    Hello @kovbal79

    In my opinion, you have generated a wrong structure of form, because you have distributed the fields in columns instead of rows.

    The process is easier.

    Insert a Div field per row, with the fields belonging to the rows inside them.

    Assign to these Div fields a custom class name, for example: additional-row

    Enter the following piece of code into the “Customize Form Design” attribute, in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

    
#fbuilder .additional-row{display:none;}

    Now, you need only one button after all rows, with the following piece of code as its onclick event:

    
jQuery('#fbuilder .additional-row:hidden:eq(0)').show();if(jQuery('#fbuilder .additional-row:hidden').length == 0)jQuery(this).hide();

    And that’s all.
    Best regards.

    Thread Starter kovbal79

    (@kovbal79)

    Thank you! That was it! I just coulnd’t figure out the row/coloumn ordering thing, I think I got confused somewhere with the many coloumns and rows ?? And code works great too!
    One last thing: I have an extra row now on the bottom, I added the button into it as well, and I have two sums in that row. I would need those sums (“Nettó ?sszesen” and “Bruttó ?sszesen”) to be aligned below the “Nettó ár” and “Bruttó ár” coloumns, but they persist on aligning/floating left, whatever css I try to add to the div.

    • This reply was modified 4 years, 6 months ago by kovbal79.
    Plugin Author codepeople

    (@codepeople)

    Hello @kovbal79

    Enter the following class name: col-sm-offset-4 into the attribute: “Add CSS Layout Keywords” in the settings of the “Net total” field (fieldname221)

    There is more information about the class names to distribute the fields in columns, visiting the following post in the plugin’s blog:

    https://cff.dwbooster.com/blog/2019/01/06/columns

    Best regards.

    Thread Starter kovbal79

    (@kovbal79)

    Great, and thanks for the link too, I’ll keep learning more about the plugin’s possibilities, I just really love working in it ??

    Best regards

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Button onclick new fields shown’ is closed to new replies.