You are viewing limited content. For full access, please sign in.

Question

Question

Hide Submit button but not Save as draft

asked on May 28, 2020 Show version history

Hello,

I have the following code, the issue is it works fine for hiding the Submit button, but unfortunately also hides "Save as draft"

$(document).ready(function() { 
  var $checkbox = $('#Field7-0, #Field7-1, #Field7-2, #Field7-3, #Field7-4, #Field7-5, #Field7-6, #Field7-7, #Field7-8, #Field7-9, #Field7-10, #Field7-11, #Field7-12, #Field7-13, #Field7-14, #Field7-15, #Field7-16, #Field7-17, #Field7-18, #Field7-19, #Field11-0, #Field11-1, #Field11-2, #Field11-3, #Field11-4, #Field11-5');
  $('.check input').change(function() {
    $(this).is(':checked') ? $(this).siblings('label').css({'text-decoration':'line-through'}) : $(this).siblings('label').css({'text-decoration':''});
    $checkbox.filter(':not(:checked)').length === 0 ? $('.btn-wrapper').show() : $('.btn-wrapper').hide();    
  });
});

Can someone please help me to hide only the submit button till everything is selected & not hide Save as draf?

 

Thanks in advance,

S

0 0

Answer

SELECTED ANSWER
replied on May 28, 2020 Show version history

Without completely redesigning your code, the easiest option might be to just trigger the change event on checked inputs with something like this.

$(document).ready(function() { 
  var $checkbox = $('#Field7-0, #Field7-1, #Field7-2, #Field7-3, #Field7-4, #Field7-5, #Field7-6, #Field7-7, #Field7-8, #Field7-9, #Field7-10, #Field7-11, #Field7-12, #Field7-13, #Field7-14, #Field7-15, #Field7-16, #Field7-17, #Field7-18, #Field7-19, #Field11-0, #Field11-1, #Field11-2, #Field11-3, #Field11-4, #Field11-5');
  
  $('.check input').change(function() {
    $(this).is(':checked') ? $(this).siblings('label').css({'text-decoration':'line-through'}) : $(this).siblings('label').css({'text-decoration':''});
    $checkbox.filter(':not(:checked)').length === 0 ? $('.Submit').show() : $('.Submit').hide();    
  });

  // trigger change event on checked inputs when form loads
  $('.check input:checked').change();
});

 

0 0

Replies

replied on May 28, 2020 Show version history

The problem you're having is that your code is hiding the entire button container, which includes not just the Submit Button, but also the Save as Draft button.

Try replacing '.btn-wrapper'

with '.Submit'

 

You'll also want to make sure you test your drafts. Something to keep in mind is that any changes you made to styling via JavaScript would not be saved with the draft.

As a result, if you check a box that hides the submit button, save a draft, then open that draft, the Submit button might be visible again and the text decoration wouldn't be there because no change events fired to make the changes.

To get around this, you'll need another function that fires on document ready and re-applies the changes.

 

1 0
replied on May 28, 2020

Thanks

 I tried the . submit but it doesn't work....

Can you please suggest what would be the other function?

This is cloud version

0 0
SELECTED ANSWER
replied on May 28, 2020 Show version history

Without completely redesigning your code, the easiest option might be to just trigger the change event on checked inputs with something like this.

$(document).ready(function() { 
  var $checkbox = $('#Field7-0, #Field7-1, #Field7-2, #Field7-3, #Field7-4, #Field7-5, #Field7-6, #Field7-7, #Field7-8, #Field7-9, #Field7-10, #Field7-11, #Field7-12, #Field7-13, #Field7-14, #Field7-15, #Field7-16, #Field7-17, #Field7-18, #Field7-19, #Field11-0, #Field11-1, #Field11-2, #Field11-3, #Field11-4, #Field11-5');
  
  $('.check input').change(function() {
    $(this).is(':checked') ? $(this).siblings('label').css({'text-decoration':'line-through'}) : $(this).siblings('label').css({'text-decoration':''});
    $checkbox.filter(':not(:checked)').length === 0 ? $('.Submit').show() : $('.Submit').hide();    
  });

  // trigger change event on checked inputs when form loads
  $('.check input:checked').change();
});

 

0 0
replied on May 28, 2020

The class in cloud is btn-wrapper not submit

0 0
replied on May 28, 2020

I don't have access to cloud, but it should be essentially the same. The class for the parent container is .btn-wrapper the button itself is .Submit.

Did you do .submit or .Submit? Class names are case-sensitive.

0 0
replied on May 28, 2020

That might have been the problem.....I will try tomorrow & update.

Thanks

0 0
replied on June 1, 2020

Perfect!!!

Thanks

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.