Hide submit button based on other fields

asked on June 30, 2021 • Show version history

Hi,

I am trying to write a simple Javascript code to hide the submit button based on three fields. Looks like a simple task but I am not sure where I am going wrong.

Conditions :- when two of those three fields are checked (Field 86 called magiq and field 87) and third field (#103) has amount ($)/value entered in that, show the submit button. I have pasted the code I am using and an image also. Any help will be appreciated.

$(document).ready(function(){
// hide submit by default
$('.Submit').hide();

// apply event handler to CHECKBOX inputs
$('.showSubmit input').change(function(){
// if 1 or more checked selections are found
if(($('.showSubmit input[value="Updated"]:checked').length > 0)&&
($('.showSubmit input[value="UpdatedP"]:checked').length > 0)&&
($("#Field103").val() !="")
){
// show submit button
$('.Submit').show();
}
// otherwise
else{
// hide submit button
$('.Submit').hide();
}
});
});

0 0

replied on June 30, 2021 • Show version history

My recommendation in these situations is to avoid trying to manipulate the Submit button with JavaScript and just add your own submit button so you can use Field Rules.

<button type="button" id="customSubmit">Submit</submit>

CSS

.Submit {
    display: none !important;
}

JavaScript

$(document).ready(function(){
    $('#customSubmit').on('click',function(){
        $('.Submit').click();
    });
});

Based on what you described, your logic should be simple enough to work with a field rule applied to the Custom HTML element holding your new button.

You would just create a "When All" condition for

Field1 - Choice - Is Checked

Field2 - Choice - Is Checked

Field3 - Is Not Blank

You'd need to add a little more CSS to properly format your new submit button, but in my experience this is much easier to manage.

3 0

replied on July 1, 2021

Thank You. That was really helpful in an another form but I would have to find the solution using Javascript only because that's how the user wants.

0 0

replied on July 1, 2021

Are you getting any errors in the console? There could be a lot of things causing the problem but it is hard to say without more information. It could be that your value attributes aren't matching as expected, or it could be a combination of things.

First, I'd recommend adding an additional class to distinguish between your two different checkboxes, or use the unique ids of the parent like $('#q89 :checked') rather than trying to target them by the value attribute.

Second, it looks like your Amount Paid field does not have the showSubmit class meaning it is not going to trigger the event handler. You might see it work as expected if you fill that field first then try checking the boxes afterward.

Third, you can simplify the code by using jQuery's .toggle() method instead of having an if-else statement with separate show/hide methods.

  $('.showSubmit input').on('change',function(){
    // check if display condition is met
    var display = $('.checkbox1 :checked').length > 0 && 
                  $('.checkbox2 :checked').length > 0 &&
                  $('#Field103').val() != '';

    // show value in console for testing
    // remove when everything is working
    console.log(display.toString());

    $('.Submit').toggle(display);
  });

0 0

Question

Question

Hide submit button based on other fields

Replies

Sign in to reply to this post.