Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

Question

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

I would greatly appreciate any assistance with this request, please.

Here is the input that I have:

<input onchange="UpdateItemQuantity(this.value,1284349,0,10352185,2579246,'','AU'); return false;" type="number" class="form-control cart-quantity" min="1" value="1"/>

If the input value is increased to 3 or more, I would like a message to be displayed in a div below.

Project Background: Customers will add items to their cart and if they reach 3, they will receive a free product

Is this feasible?

Thank you in advance!

jquery html css

Answer 1

Answer №1

To implement this feature in your website, start by inserting the following code into the html section to create a div below the input:

<div id="free-product"><p>You have a free product</p></div>

In your CSS stylesheet, add the following styling:

#free-product {
    display:none
}

Next, within your UpdateItemQuantity function, include the following code snippet:

if(this.value > 2) {
     $('#free-product').show();
}
else{
    $('#free-product').hide();
}

UPDATE:

If you are able to modify the UpdateItemQuantity function (as mentioned in the comments), consider adding an event listener to the element. Assign an id to your input and use the following script:

if($('#your_input_id').val() > 2 ) {
     $('#free-product').show();
}
$('#your_input_id').on('change',function(){
    if($(this).val() > 2 ) {
        $('#free-product').show();
    }
    else{
        $('#free-product').hide();
    }
})

View Demo: https://jsfiddle.net/w8vwsx81/

Answer 2

To implement this feature in your website, start by inserting the following code into the html section to create a div below the input:

<div id="free-product"><p>You have a free product</p></div>

In your CSS stylesheet, add the following styling:

#free-product {
    display:none
}

Next, within your UpdateItemQuantity function, include the following code snippet:

if(this.value > 2) {
     $('#free-product').show();
}
else{
    $('#free-product').hide();
}

UPDATE:

If you are able to modify the UpdateItemQuantity function (as mentioned in the comments), consider adding an event listener to the element. Assign an id to your input and use the following script:

if($('#your_input_id').val() > 2 ) {
     $('#free-product').show();
}
$('#your_input_id').on('change',function(){
    if($(this).val() > 2 ) {
        $('#free-product').show();
    }
    else{
        $('#free-product').hide();
    }
})

View Demo: https://jsfiddle.net/w8vwsx81/

Answer 3

Answer №2

In this demonstration, the functionality and operation of the concept are showcased.

$(function() {
    $('.quantity').on('input', function() {
        var states = ['hide','show'],    //potential states of the freebie div
            i = +this.value > 2 ? 1 : 0; //determining index of the states array
        $('.freebie')[states[i]]();      //example $('.freebie')['hide']() is equivalent to $('.freebie').hide()
    })
    .trigger('input');
    
    $('.increase,.decrease').on('click', function() {
        var diff = $(this).is('.increase') ? 1 : -1; //deciding whether to decrement or increment
        $('.quantity').val(function() {
            return +this.value + diff; //decrement or increment
        });
        $('.quantity').trigger('input'); //manually triggering the 'input' event or any other event that shows the freebies div
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="decrease">-</button>
<input type="number" class="quantity" value="0">
<button type="button" class="increase">+</button>
<div class="freebie">
    <img src="http://momsneedtoknow.com/wp-content/uploads/2009/01/freebies.gif" />
</div>

Answer 4

In this demonstration, the functionality and operation of the concept are showcased.

$(function() {
    $('.quantity').on('input', function() {
        var states = ['hide','show'],    //potential states of the freebie div
            i = +this.value > 2 ? 1 : 0; //determining index of the states array
        $('.freebie')[states[i]]();      //example $('.freebie')['hide']() is equivalent to $('.freebie').hide()
    })
    .trigger('input');
    
    $('.increase,.decrease').on('click', function() {
        var diff = $(this).is('.increase') ? 1 : -1; //deciding whether to decrement or increment
        $('.quantity').val(function() {
            return +this.value + diff; //decrement or increment
        });
        $('.quantity').trigger('input'); //manually triggering the 'input' event or any other event that shows the freebies div
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="decrease">-</button>
<input type="number" class="quantity" value="0">
<button type="button" class="increase">+</button>
<div class="freebie">
    <img src="http://momsneedtoknow.com/wp-content/uploads/2009/01/freebies.gif" />
</div>

Utilize jQuery to toggle the visibility of a div depending on the numerical quantity input

Answer №1

Answer №2

Similar questions

Utilizing Ajax for populating a cascading selection menu

How to Add a Responsive Inset Transparent Overlay to Images without Using JavaScript?

The Kendo element's DataSource becomes null if accessed outside of a function

Utilizing the Google Translate API within an ASP MVC framework to translate a div's content from English to Arabic

Tips for formatting angular text sections

Restricting the number of checkboxes using jQuery depending on which radio buttons are selected

Getting the chosen value from a dropdown menu on form submission using PHP

I can't find my unit test in the Test Explorer

Is it possible to retrieve information from a MySQL database by utilizing Bootstrap and Ajax with the selected ID?

Unable to transform Table layout into DIVs

Using the KnockOut js script tag does not result in proper application of data binding

View the picture directly on this page

Is it possible to utilize a variable in determining the order of operations?

Initiate a click event on an anchor element with the reference of "a href"

The browser fails to implement styling prior to a demanding workload

Sending Rails form data to a JavaScript click event

Changing color when mouse hovers using Jquery

Challenges related to maintaining a webpage's content using AJAX

"Fixing the position of a div on the Samsung Galaxy S8 navigation bar to

jquery dialog box displaying a webpage