New to the community? Start here

Forminator: hide the Submit button

I want to hide the Submit button when any specific answer is selected. Or, in another word – when the “hockey” and “goalie” is selected, then a HTML section is shown.

When that HTML section is shown, showing that Submit button is okay. But when any other option is selected, I want to hide that Submit button. Can this be done with custom JavaScript?

Tue, 2 Apr 2019 21:08:09
More Forminator Pro discussions
Forminator Pro
  • Andy
    • Product Design Lead

    mlux I just had a quick look at this, and technically you should be able to do this already. If you go to your Forms field settings area, click the 'Submit' button to edit it, switch to Visibility and set the button to only show when another field is X – that should work. I.e.

    [attachments are only viewable by logged-in members]

    However, in trying this it appear it's not working in Forminator 1.6.2. I have pinged the devs to get this fixed up.

    Hope this helps!

    Andy

  • mlux
    • Site Builder, Child of Zeus

    I did try this originally and I guess it was not added to this post by the support agent. I have tried to use the conditional area and also tag it with a css class (so I can display: none) but neither works

  • Mukul Chawla
    • Product Manager

    mlux can you confirm the Forminator version you’re using? One of our devs confirmed that the conditional logic is working fine in 1.6.2 which is our latest released version. If you still face some issues, you can try to open a Live chat session with one of our support heroes and they’ll be happy to help you with this.

  • Dimitris Kalliris
    • Support Team Lead

    Hello there mlux,

    hope you’re doing well today!

    In order to have a better look at your settings, could you please grant temporary support access via WPMUDEV Dashboard plugin? No need to share any WP admin credentials, just navigate in WP admin area under WPMU DEV -> Support -> Support Access page and click on the “grant support access” button. You can find detailed information about it here: https://wpmudev.com/docs/getting-started/getting-support/#chapter-5

    Please do reply back here when access is granted because we don’t get any notifications about it.

    Thank you,

    Dimitris

  • Dimitris Kalliris
    • Support Team Lead

    Hey mlux

    It seems that the pagination fields are causing issues with the visibility options of the Submit button. In order to surpass that now (as this will require some more in-depth check and will be addressed in a future release of Forminator) you can add the following custom CSS class to the HTML field:

    my-custom-html

    [attachments are only viewable by logged-in members]

    and then create a little MU plugin by creating a new PHP file in your server like

    wp-content/mu-plugins/forminator-fix.php

    (just create the /mu-plugins/ folder if it doesn't exist already)

    and insert in there the exact snippet:

    <?php
    

    
add_action(
    
'wp_footer',
    
function() {
    
?>
    
<script>
    
( function( $ ) {
    
$( document ).on( 'click', '.forminator-pagination--footer', function( e ) {
    
var target =  $( e.target ),
    
next_button = $( '.forminator-pagination-next, .forminator-button-next' ),
    
prev_button = $( '.forminator-pagination-prev, .forminator-button-prev' );
    

    
if ( ( target.hasClass( 'forminator-pagination-next' ) || target.hasClass( 'forminator-button-next' ) ) && 'Send Message' === target.text()  ) {
    
if( $( '.my-custom-html' ).is( ':visible' ) ) {
    
target.css( 'display', 'block' );
    
} else {
    
target.css( 'display', 'none' );
    
}
    
} else if ( target.hasClass( 'forminator-pagination-prev' ) || target.hasClass( 'forminator-button-prev' ) ) {
    
next_button.css( 'display', 'block' );
    
}
    
} );
    
} ( jQuery ) )
    
</script>
    
<?php
    
}
    
);

    Warm regards,

    Dimitris

  • Kostas
    • CTO

    Hi mlux ,

    Everything seems as supposed to but I need to take a closer look to understand what might be going wrong here. So I’ll need some extra access if possible to take a look and fix this for you :slight_smile: .

    You can send me the information needed privately through our contact form at https://wpmudev.com/contact/#i-have-a-different-question by following this example:

    Subject: "Attn: Konstantinos Xenos"
    

    
- Admin login ( if Multisite please provide Super Admin details ):
    
Admin Username:
    
Admin Password:
    
Login URL:
    

    
- FTP credentials
    
Hostname:
    
Username:
    
Password:
    
Port:
    
Key-File ( and password ) if needed
    

    
- Link back to this thread for reference
    
- Any other relevant URLs -or- information regarding the issue that was not included in this thread

    Regards,

    Konstantinos

  • Kostas
    • CTO

    Hi mlux ,

    The code snippet works fine on your website as well.

    You have assinged the ‘my-custom-html’ class on both HTML fields though and that’s why the Send Message button is always displayed. That class should be applied only to the HTML field that you want to show the button with as well.

    Make sure that you only have the class ‘my-custom-html’ to only 1 html field.

    Regards,

    Konstantinos

  • Kostas
    • CTO

    I’m sorry but I am confused on what’s needed here. on your original request you’ve asked for:

    When that HTML section is shown, showing that Submit button is okay. But when any other option is selected, I want to hide that Submit button.

    Specifically pointing to the selections of first selecting Hockey and then Goalie as that would produce a specific HTML where the Send button should be visible as well.

    Can you be a little bit more specific on what you’re trying to achieve here so I can help out?

    From your last comment I understand that you don’t want the “Send Message” button at all in the form ? Is this correct?

    Regards,

    Konstantinos

  • Kostas
    • CTO

    Perfect thank you for clarifying mlux !

    I’ve updated the code to :

    <?php
    

    
add_action(
    
'wp_footer',
    
function() {
    
?>
    
<script>
    
( function( $ ) {
    
$( document ).on( 'click', '.forminator-pagination--footer', function( e ) {
    
var target =  $( e.target ),
    
next_button = $( '.forminator-pagination-next, .forminator-button-next' ),
    
prev_button = $( '.forminator-pagination-prev, .forminator-button-prev' );
    

    
if ( ( target.hasClass( 'forminator-pagination-next' ) || target.hasClass( 'forminator-button-next' ) ) && 'Send Message' === target.text()  ) {
    
target.css( 'display', 'none' );
    
} else if ( target.hasClass( 'forminator-pagination-prev' ) || target.hasClass( 'forminator-button-prev' ) ) {
    
next_button.css( 'display', 'block' );
    
}
    
} );
    
} ( jQuery ) )
    
</script>
    
<?php
    
},
    
999
    
);

    This should always hide the “Send Message” button when reaching the end of the form.

    Regards,

    Konstantinos