Event after check values of multiple dropdown lists

user_6128023 0
Viewed 77

My knowledge of Jquery / Javascript is very limited. I got stuck with a code that shows / hides the add to cart button and a blinking message on the product page of Joomla, Virtuemart depending on the choices of the custom fields which are dropdown lists. On the product page that has a single custom field everything works just fine. Only when the user selects something other than the default value the blinking message disappears and the add to cart button appears. Please see here : https://leathercareland.com/en/leather-care-peripoiisi-dematos/proionta-saphir-saphir-products/pommadier-creme-gl-76-detail. On the product page that has multiple custom fields if a user makes a choice in any of the dropdowns then the add to cart appears. Please see here : https://leathercareland.com/en/leather-care-peripoiisi-dematos/vafes-ypodimaton-kai-dermatinon-eidon-shoe-and-leather-dyes/starter-set-big-detail. I need to modify the provided code so that on the page that has multiple dropdown lists only when the user has made a choice on every dropdown list to have the add to card button appear. The code is as follows:

<script>
    jQuery(document).ready(function ($) {

        function blink() { 
          $('.blink_slow').fadeOut(500).fadeIn(500, blink); 
        }
        blink();
        
        $(".tab-content").not(':first').css("display", "none");
        $("ul.tabs li:first").addClass("active");

        $("ul.tabs a").click(function(event) {
            event.preventDefault();
            $(this).parent().addClass("active");
            $(this).parent().siblings().removeClass("active");
            var tab = $(this).attr("href");
            $(".tab-content").not(tab).css("display", "none");
            $(tab).fadeIn();
        });
        $('.quickadd').parent().click(
            function() { 
                var btn = $(this),href = btn.find('a').eq(0).attr('href'),
                    dat = $(this).closest('form').serialize();
                window.parent.vmQuickAdd(dat);

                return false;
        });
        $('.product-fields select').each(function(){
            var $select = $(this);
             //console.log($select.val());
                    
            if(($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE_LAST')){
                $('.addtocart-bar').hide(); 
                $select.change(function(){
                    if(($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($select.val() === 'COM_VIRTUEMART_PLEASE_CHOOSE_LAST')) {
                        $('.addtocart-bar').hide();
                        $('.flash').show(); }

                    else { $('.addtocart-bar').show(); $('.flash').hide();}
                });
            }
            
        });

    });
</script>

I know that I need to check for values on every dropdown list but I cannot do that programmatically....

Is there any one out there that he/she can help or give me ideas with possible examples?

Thanks George

joomla php jquery javascript
2 Answers

You can use .each loop to iterate through your select and then check value of each selects and if value matches COM_VIRTUEMART_PLEASE_CHOOSE or COM_VIRTUEMART_PLEASE_CHOOSE_LAST hide the cart div else show same.

Demo Code :

$('.product-fields select').on("change", function() {
  var flag = true; //set flag
  //hide..add to cart
  $('.addtocart-bar').hide();
  $('.flash').show();
  //loop through select
  $('.product-fields select').each(function() {
    //if value is please choose
    if ($(this).val() == "COM_VIRTUEMART_PLEASE_CHOOSE" || $(this).val() == "COM_VIRTUEMART_PLEASE_CHOOSE_LAST") {
      flag = false //set flag flase
    }
  })
  if (flag == true) {
    $('.addtocart-bar').show();
    $('.flash').hide();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product-short-description">

  <div class="product-fields">
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE" selected="selected">Please choose</option>
      <option value="BLACK">BLACK</option>
      <option value="WHITE">WHITE</option>
    </select>
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE" selected="selected">Please choose</option>
      <option value="BLACK">BLACK</option>
      <option value="WHITE">WHITE</option>
      <option value="RED">RED</option>
    </select>
    <select>
      <option value="COM_VIRTUEMART_PLEASE_CHOOSE_LAST" selected="selected">Please choose</option>
      <option value="WHITE">WHITE</option>
      <option value="RED">RED</option>
      <option value="BLACK">BLACK</option>
    </select>
    <div class="flash" style="display: block;">
      Please make your choice(s) from the list above so that you could add the product to the cart.
    </div>
    <div class="addtocart-bar" style="display: none;">
      Your cart here
    </div>
  </div>

user_106064000

Thank you very much for your answer Swati and I am sorry that I didn't test thoroughly my code and posted here as a correct answer a wrong one.... Sorry again. What I finally did was to take your code and make some small changes as follows: Before the $('.product-fields select').on('change', function() I added

$('.addtocart-bar').hide(); 
$('.flash').show();
var $select = $(this);

so it initializes with false and define the select on which I was getting an undefined variable. I also added some parenthesis and semicolons where needed so my final code is:

  <script>
jQuery(document).ready(function ($) {

    function blink() { 
      $('.blink_slow').fadeOut(500).fadeIn(500, blink); 
    }
    blink();
    
    $(".tab-content").not(':first').css("display", "none");
    $("ul.tabs li:first").addClass("active");

    $("ul.tabs a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("active");
        $(this).parent().siblings().removeClass("active");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
    $('.quickadd').parent().click(
        function() { 
            var btn = $(this),href = btn.find('a').eq(0).attr('href'),
                dat = $(this).closest('form').serialize();
            window.parent.vmQuickAdd(dat);

            return false;
    });
    
    $('.addtocart-bar').hide(); 
    $('.flash').show();
    var $select = $(this);
    $('.product-fields select').on('change', function() {
        var flag = true; //set flag
        //hide..add to cart
        $('.addtocart-bar').hide(); 
        $('.flash').show();
        //console.log($select.val());
        //loop through select
    $('.product-fields select').each(function() {
        //if value is please choose
            if (($(this).val() === 'COM_VIRTUEMART_PLEASE_CHOOSE') || ($(this).val() == 'COM_VIRTUEMART_CHOOSE_LAST')) {
                flag = false //set flag false
            }
        })
    if (flag == true) {
        $('.addtocart-bar').show();
        $('.flash').hide();
        } 
    });

});
</script>

I am truly sorry again Thanks again George

user_61280230
Related