Show DIV if input field is >= $row->number
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
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.
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.
All the best from the United Kingdom.
Re: Show DIV if input field is >= $row->number
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
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.
All the best from the United Kingdom.
Re: Show DIV if input field is >= $row->number
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
Do you know what, I've never done a "fiddle" on there before. Sorry.
Here is the code.
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.
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' />
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.
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
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.
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.
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
I thought this might work................
But it doesn't. doesn't make anything appear.
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.
All the best from the United Kingdom.
Re: Show DIV if input field is >= $row->number
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
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.
All the best from the United Kingdom.
Re: Show DIV if input field is >= $row->number
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
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?
<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.
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
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.
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
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.
All the best from the United Kingdom.
Re: Show DIV if input field is >= $row->number
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
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.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.