Show DIV if input field is >= $row->number

JavaScript and client side scripting.

Moderator: General Moderators

simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Show DIV if input field is >= $row->number

Post by simonmlewis »

I need to make a DIV show up if an input text field contains greater than or equal to a dynamic figure.

This is similar, but requires a submit button. I just want it to show if the field IS >= $number.

http://jsfiddle.net/bloodygeese/3XGGn/36/

I thought it would be done via a getelementid, but not quite sure.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

Rather than listening for a click, you could listen for keyup, I suppose.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

Sure but this is not for typing into a box, this is done when someone click the + or - input buttons. So an onChange would be ok, but don't see how to alter their code to adapt to my method.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

You've not given us much to work with. Can you set up a fiddle showing at least the basics and a description of how you envision it working?
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

Do you know what, I've never done a "fiddle" on there before. Sorry.
Here is the code.

Code: Select all

<Script>$(window).load(function(){
jQuery(document).ready(function(){
    // This button will increment the value
    $('.qtyplus').click(function(e){
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(0);
        }
    });
    // This button will decrement the value till 0
    $(".qtyminus").click(function(e) {
        // Stop acting like a button
        e.preventDefault();
        // Get the field name
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 1
        if (!isNaN(currentVal) && currentVal > 1) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
        }
    });
});

});//]]>  
</script>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>

<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' id='quantity' name='quantity' value='5' class='qty' readonly/>
    <input type='button' value='+' class='qtyplus' field='quantity' />
So when the person hit the Plus to reach at least X, let's say 10, I want a DIV to appear that shows some text.

It's just so that we can say "yes, you have added enough to be eligible to this special offer.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

http://jsfiddle.net/hari_shanx/h8798/
This is close, but I only want the DIV to show, onchange, once the figure in the box, is > $variable.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

I thought this might work................
But it doesn't. doesn't make anything appear.

Code: Select all

<script>
$(document).ready(function () {
    $("#quantity").change(function () {
        $("#specialoffer").css("display", this.value > "9" ? "block" : "none");
    });
});
</script>

<?php
echo "
<div id='specialoffer' style='display: none'>Helo</div>
<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' id='quantity' name='quantity' value='5' class='qty' readonly/>
    <input type='button' value='+' class='qtyplus' field='quantity' />
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

A very simple (and imperfect/incomplete) example: https://jsfiddle.net/p0gg7rfw/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

It's not working. I have altered the class names.

Code: Select all

<style>
.specialoffer { display: none; }
</style>
<Script>$(window).load(function(){
jQuery(document).ready(function(){
    // This button will increment the value
   var threshold = 10;
$('.qtyplus').click(function(e) {
  // Stop acting like a button
  e.preventDefault();
  // Get the field name
  fieldName = $(this).attr('field');
  // Get its current value
  var currentVal = parseInt($('input[name=' + fieldName + ']').val());
  var updatedVal
  // If is not undefined
  if (!isNaN(currentVal)) {
    // Increment
    updatedVal = currentVal + 1;
    $('input[name=' + fieldName + ']').val(updatedVal);
  } else {
    // Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(0);
  }
  if (typeof updatedVal !== 'undefined' && updatedVal >= threshold) {
  	$('.specialoffer').removeClass('specialoffer');
  }
});
// This button will decrement the value till 0
$(".qtyminus").click(function(e) {
  // Stop acting like a button
  e.preventDefault();
  // Get the field name
  fieldName = $(this).attr('field');
  // Get its current value
  var currentVal = parseInt($('input[name=' + fieldName + ']').val());
  var updatedVal;
  // If it isn't undefined or its greater than 1
  if (!isNaN(currentVal) && currentVal > 1) {
    // Decrement one
    updatedVal = currentVal - 1;
    $('input[name=' + fieldName + ']').val(updatedVal);
  } else {
    // Otherwise put a 0 there
    $('input[name=' + fieldName + ']').val(1);
  }
  if (typeof updatedVal !== 'undefined' && updatedVal < threshold) {
  	$('.specialoffer').addClass('specialoffer');
  }
});
});

});//]]>  
</script>

.
.
.
<div id='specialoffer' style='display: none'>Helo</div>
<input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' id='quantity' name='quantity' value='5' class='qty' readonly/>
    <input type='button' value='+' class='qtyplus' field='quantity' />
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

You've created an element with id specialoffer and are trying to target an element with class specialoffer...
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

Maybe I am being a bit dim here.
<div class="secret-sauce hide-me">
This is where the magic happens
</div>

You called the class that contains the "special words", "secret sauce", and you control how it shows or hides, by "hide-me".

I'm just called it specialoffer. Why is that wrong?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

I just altered it and it worked, by having the addtional class. But I don't know why that works, and just using how I did it, doesn't work.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: Show DIV if input field is >= $row->number

Post by simonmlewis »

Finally, how do I make that (var threshold = 10;) a dynamic value, as the guys will want to alter the amount eligible for offers.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

Two things. One, you were mixing classes and ids, which will always be problematic. Two, you need a selector (can be a class or an id, doesn't much matter) to be able to target the element, and another class to toggle visibility. Alternately, I suppose you could just toggle visibility with jQuery's .show and .hide methods.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: Show DIV if input field is >= $row->number

Post by Celauran »

simonmlewis wrote:Finally, how do I make that (var threshold = 10;) a dynamic value, as the guys will want to alter the amount eligible for offers.
If it's coming from the server, you'll need to inject it into your JS. Data attribute on the parent, maybe? Bear in mind that this means it can be manipulated by the user.
Post Reply