Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Increasing/Decreasing related variables

    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).

    Code:
    <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?
    Last edited by chaosfang; 12-27-2010 at 09:55 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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. ]
    Last edited by chaosfang; 12-27-2010 at 08:45 PM.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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:
    Code:
    <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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    chaosfang (12-27-2010)

  • #7
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    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.]

    Code:
    if (change == +1)
       var newmax = parseInt(maxqty.value) - 4 * newqty * change;
    else
       var newmax = parseInt(maxqty.value) - 4 * (newqty - change) * change;
    Quote Originally Posted by Old Pedant View Post
    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.

    Quote Originally Posted by Old Pedant View Post
    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:
    Code:
    <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. ]
    Last edited by chaosfang; 12-27-2010 at 10:29 PM.

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,561
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    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.
    Code:
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #9
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks

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

    Code:
    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
    Last edited by chaosfang; 12-27-2010 at 11:02 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •