Unhide an external button only when multiple indipendent input fields are filled elsewhere

by

I need to show a specific button only when some fields in another form are filled.
Working on wordpress and woocommerce.

These fields come from a plugin that gives me custom fields for woocommerce.
The button is from another plugin about a configurator, normally that button is accessible as soon as you enter the product page, it let’s you customize stuff.

Even though these fileds are required I need to make sure customers fill those first, that’s why I thought about hiding the customizer button untill all previous fields are filled.

I used this code but it’s not working, it seems like it’s not checking all fields at the same time.

<script>
jQuery(document).ready(function($){
    $(".wapf-wrapper").on("keyup", function() {
        var filled = true;
        $(".wapf-wrapper input[type=text]").each(function() {
            if (this.value == '') {
                filled = false;
                return false;
                
            }
        });
        $(".configure-product").toggle(!filled);
        $(".configure-product").toggle(filled);
    });
});
</script>

.wapf-wrapper is the div containing those extra fields
.configure-product is the configurator button

I tried so many other scripts but nothing worked properly. Hope I find peace here.

21 thoughts on “Unhide an external button only when multiple indipendent input fields are filled elsewhere”

  1. Ciao Riccardo,
    Are you looking for this ?

    jQuery(document).ready(function($){
 $(".wapf-wrapper").on("keyup", function() {
  var filled = true;
    $(".wapf-wrapper").each(function(){
        if($(this).val() == '') {
            filled = false
        }
    });
    $(".configure-product").toggle(filled);
 });
});

    check on codepen

    Reply

Leave a Comment