Page 1 of 2

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

Posted: Fri Jan 08, 2016 7:58 am
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.

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

Posted: Fri Jan 08, 2016 8:01 am
by Celauran
Rather than listening for a click, you could listen for keyup, I suppose.

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

Posted: Fri Jan 08, 2016 8:33 am
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.

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

Posted: Fri Jan 08, 2016 8:38 am
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?

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

Posted: Fri Jan 08, 2016 8:57 am
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.

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

Posted: Fri Jan 08, 2016 9:04 am
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.

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

Posted: Fri Jan 08, 2016 9:15 am
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' />

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

Posted: Fri Jan 08, 2016 9:33 am
by Celauran
A very simple (and imperfect/incomplete) example: https://jsfiddle.net/p0gg7rfw/

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

Posted: Fri Jan 08, 2016 9:42 am
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' />

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

Posted: Fri Jan 08, 2016 9:47 am
by Celauran
You've created an element with id specialoffer and are trying to target an element with class specialoffer...

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

Posted: Fri Jan 08, 2016 9:55 am
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?

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

Posted: Fri Jan 08, 2016 9:57 am
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.

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

Posted: Fri Jan 08, 2016 10:02 am
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.

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

Posted: Fri Jan 08, 2016 10:04 am
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.

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

Posted: Fri Jan 08, 2016 10:05 am
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.