...

View Full Version : Resolved Increasing/Decreasing related variables



chaosfang
12-27-2010, 05:35 AM
I already got the following JavaScript code working somewhat (originally taken from a different thread in a different forum and tweaked to give qty ceiling [10] and floor [2] values). However, it seems to work for only one qty variable, and the subtractQty function doesn't seem to subtract properly (at least in Opera 11).


<html>
<head>
<title></title>
<style type="text/css">

</style>
<script type="text/javascript">
function subtractQty(){
var x=document.getElementById("qty").value;
var y=document.getElementById("maxqty").value;
if(x - 1 < 2 || y + x <= 40)
return;
else {
document.getElementById("qty").value--;
document.getElementById("maxqty").value=y+x*4;
document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
}
}
function additionQty(){
var x=document.getElementById("qty").value;
var y=document.getElementById("maxqty").value;
if(x >= 10 || y - x < 2)
return;
else{
document.getElementById("qty").value++;
document.getElementById("maxqty").value=y-x*4;
document.getElementById("textqty").innerHTML = document.getElementById("qty").value;
document.getElementById("textmaxqty").innerHTML = document.getElementById("maxqty").value;
}
}
</script>
</head>
<body>
<form name="f1">
<input type='hidden' name='qty' id='qty' value=2 />
<input type='hidden' name='maxqty' id='maxqty' value=40 />
<div id="textqty">2</div>
<input type='button' name='subtract' onclick='javascript: subtractQty();' value='-'/>
<input type='button' name='add' onclick='javascript: additionQty();' value='+'/>
<div id='textmaxqty'>40</div>
</form>
</body>
</html>

What I'd want to happen would be the following: if let's say we have 5 pairs of buttons, making it look something like this:
A: 2 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
D: 2 [+] [-]
E: 2 [+] [-]
maxqty: 40
Whenever the user clicks on the [+] button for A, it would subtract (current value + 1) * 4 from maxqty and raise A to 3, then when the user clicks on the [+] for C, it would subtract (current value + 1) * 4 from maxqty and raise C to 3, without having to copy paste multiple functions.

I'm already thinking of arrays, but being more used to PHP than Javascript -- and I'm thinking I might actually have to use AJAX for this, although I'm really in the dark with AJAX in particular -- I'm rather confused and somewhat stumped on the coding.

Suggestions?

Old Pedant
12-27-2010, 07:47 PM
I can't see any way that AJAX would be useful for this.

But what I really can't see is any place in that code where current value is defined.

Where is that supposed to be coming from???

chaosfang
12-27-2010, 08:39 PM
Maybe I ought to clarify that last bit; I'm not exactly good with words though. I'm trying to make it so that when I have

A: 2 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 40

When I increase A by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 28

Then when I increase C by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 3 [+] [-]
maxqty: 16

Now in the existing code, the current value would be variable qty... and I can't seem to progress from there.

[ EDIT: I was thinking AJAX could be useful because after the user is done with the page, he can then either upload all the data to a MySQL for future use, or export the data to an XML file, which he can import to the page later on. ]

Old Pedant
12-27-2010, 09:08 PM
Okay, so that means:

A: 2 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 40

When I increase A by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 28

When I increase A by 1 *AGAIN*, it becomes

A: 4 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 12

When I DECREASE A by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 24



Is that correct??

That is, you multiply 4 times the *NEW* value of the button and subtract/add that from/to maxqty??

Old Pedant
12-27-2010, 09:19 PM
Because that is *NOT* what your code in post #1 is doing, AT ALL.

It is mutliplying the *EXISTING* value by 4 and adding/subtracting that. *NOT* the new value.

Old Pedant
12-27-2010, 09:21 PM
I'm sure I have something wrong here, in the arithmetic, since I am not sure whether what you wrote in your text, in your code, or your example is what you really want.

But in any case, it should be easy to adjust this to do what you want:

<html>
<head>
<script type="text/javascript">
function chgQty(btn)
{
var form = btn.form;
var name = btn.name;
var change = ( btn.value == "-" ? -1 : +1 );

var qty = form["qty"+name];
var maxqty = form.maxqty;

var newqty = parseInt(qty.value) + change;
var newmax = parseInt(maxqty.value) - 4 * newqty * change;

if ( newqty >= 1 && newqty < 10 && newmax > 1 && newmax <=40 )
{
qty.value = newqty;
maxqty.value = newmax;
}
}
</script>
<style type="text/css">
input.RO {
border: none;
width: 40px;
text-align: center;
}
</style>
</head>
<body>
<form name="f1">
<br>
<input type="text" readonly class="RO" name="qtyA" value="2" />
<input type="button" name="A" onclick="chgQty(this);" value="-"/>
<input type="button" name="A" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyB" value="2" />
<input type="button" name="B" onclick="chgQty(this);" value="-"/>
<input type="button" name="B" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyC" value="2" />
<input type="button" name="C" onclick="chgQty(this);" value="-"/>
<input type="button" name="C" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyD" value="2" />
<input type="button" name="D" onclick="chgQty(this);" value="-"/>
<input type="button" name="D" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyE" value="2" />
<input type="button" name="E" onclick="chgQty(this);" value="-"/>
<input type="button" name="E" onclick="chgQty(this);" value="+"/>
<hr>
max quantity: <input type="text" class="RO" name="maxqty" value="40" />
</form>
</body>
</html>

And as for storing it in a DB: Just add a submit button, submit the <form> as is to PHP, and you don't need more. You certainly don't need AJAX.

chaosfang
12-27-2010, 09:44 PM
Okay, so that means:

A: 2 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 40

When I increase A by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 28

When I increase A by 1 *AGAIN*, it becomes

A: 4 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 12

When I DECREASE A by 1, it becomes

A: 3 [+] [-]
B: 2 [+] [-]
C: 2 [+] [-]
maxqty: 24



Is that correct??

That is, you multiply 4 times the *NEW* value of the button and subtract/add that from/to maxqty??

When I decrease A by 1, it should become 28, not 24... so that's multiply 4 times the new value of the button when subtracting from maxqty, and multiply 4 times the old value of the button when adding to maxqty.

[ EDIT: I solved this thanks in part to your last post.]


if (change == +1)
var newmax = parseInt(maxqty.value) - 4 * newqty * change;
else
var newmax = parseInt(maxqty.value) - 4 * (newqty - change) * change;


Because that is *NOT* what your code in post #1 is doing, AT ALL.

It is mutliplying the *EXISTING* value by 4 and adding/subtracting that. *NOT* the new value.

Oh, so that's where the problem lies.


I'm sure I have something wrong here, in the arithmetic, since I am not sure whether what you wrote in your text, in your code, or your example is what you really want.

But in any case, it should be easy to adjust this to do what you want:

<html>
<head>
<script type="text/javascript">
function chgQty(btn)
{
var form = btn.form;
var name = btn.name;
var change = ( btn.value == "-" ? -1 : +1 );

var qty = form["qty"+name];
var maxqty = form.maxqty;

var newqty = parseInt(qty.value) + change;
var newmax = parseInt(maxqty.value) - 4 * newqty * change;

if ( newqty >= 1 && newqty < 10 && newmax > 1 && newmax <=40 )
{
qty.value = newqty;
maxqty.value = newmax;
}
}
</script>
<style type="text/css">
input.RO {
border: none;
width: 40px;
text-align: center;
}
</style>
</head>
<body>
<form name="f1">
<br>
<input type="text" readonly class="RO" name="qtyA" value="2" />
<input type="button" name="A" onclick="chgQty(this);" value="-"/>
<input type="button" name="A" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyB" value="2" />
<input type="button" name="B" onclick="chgQty(this);" value="-"/>
<input type="button" name="B" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyC" value="2" />
<input type="button" name="C" onclick="chgQty(this);" value="-"/>
<input type="button" name="C" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyD" value="2" />
<input type="button" name="D" onclick="chgQty(this);" value="-"/>
<input type="button" name="D" onclick="chgQty(this);" value="+"/>
<br>
<input type="text" readonly class="RO" name="qtyE" value="2" />
<input type="button" name="E" onclick="chgQty(this);" value="-"/>
<input type="button" name="E" onclick="chgQty(this);" value="+"/>
<hr>
max quantity: <input type="text" class="RO" name="maxqty" value="40" />
</form>
</body>
</html>

And as for storing it in a DB: Just add a submit button, submit the <form> as is to PHP, and you don't need more. You certainly don't need AJAX.

Wow, thanks! :) [ I think I'll be able to figure out how to make this work for arrays and other stuff from here. ]

Old Pedant
12-27-2010, 10:31 PM
When I decrease A by 1, it should become 28, not 24... so that's multiply 4 times the new value of the button when subtracting from maxqty, and multiply 4 times the old value of the button when adding to maxqty.

Ahhh...that means my JS code needs some changes.


function chgQty(btn)
{
var form = btn.form;
var name = btn.name;
var change = ( btn.value == "-" ? -1 : +1 );

var qty = form["qty"+name];
var maxqty = form.maxqty;

var useqty = parseInt(qty.value); // old qty
if ( btn.value == "-" ) --useqty; // if subtracting, mult by new qty
var newmax = parseInt(maxqty.value) - 4 * useqty * change;

var newqty = parseInt(qty.value) + change;

if ( newqty >= 1 && newqty < 10 && newmax > 1 && newmax <=40 )
{
qty.value = newqty;
maxqty.value = newmax;
}
}


Other ways to have done this, but creating a new useqty variable seemed clearest.

chaosfang
12-27-2010, 10:35 PM
Thanks :)

EDIT: Unfortunately, it seemed to have caused some problems in the execution. Got to fix it though:


function chgQty(btn)
{
var form = btn.form;
var name = btn.name;
var change = ( btn.value == "-" ? -1 : +1 );

var qty = form["qty"+name];
var maxqty = form.maxqty;

var newqty = parseInt(qty.value) + change;
if (btn.value == "-")
var useqty = newqty-change;
else
var useqty = newqty;

var newmax = parseInt(maxqty.value) - 4 * useqty * change;

if ( newqty >= 1 && newqty < 10 && newmax > 1 && newmax <=40 )
{
qty.value = newqty;
maxqty.value = newmax;
}
}

It's kinda weird, since it's pretty much the exact same logic in a different format. Might be Google Chrome's fault, but anyway: Again, thanks for all the help :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum