Increment Buttons

[Tormod]

Hi there,

I realise this may sound elementary but I'm left scratching my head.

I'm trying to create a page in php with several values displayed on the page and a button next to each value which will increment the value by 1 and then ultimately save the values to the database.

I've played around with the submit button and my variables but I can't get it to work. I realise it's a bit cheeky to ask for help when I've not even got a starting point but I'm totally shtumped.

If anyone can help I'd be totally grateful.

[pbmods]

Heya, Tormod.

When the User clicks on the button, do you want to save the new value right away, or do you want the User to be able to increment multiple values and/or multiple times before clicking on a 'submit' button?

[Tormod]

Ideally to save it right away. So that all the data in the database reflects what's showing on the users screen.

[ak1dnar]

Oops,
I think It's good to go for a ajax/php solution for this.
Is this only for testing purpose or real world project.Anyway as you wish!
You have two choices.

Before I start may I see the first page for listining those values.Is it dynamic page or static one.?

-Ajaxrand

[nathj]

Hi there,

I realise this may sound elementary but I'm left scratching my head.

I'm trying to create a page in php with several values displayed on the page and a button next to each value which will increment the value by 1 and then ultimately save the values to the database.

I've played around with the submit button and my variables but I can't get it to work. I realise it's a bit cheeky to ask for help when I've not even got a starting point but I'm totally shtumped.

If anyone can help I'd be totally grateful.

Hi Tormod,

I have done something very similar on a recent project. The difference is mine doesn't save to a database, two reasons for that. First it was on an order form and second the submit sent an email.

However, I developed two images (plus sign and a minus sign) and then set the onlcick to call the following method.

function setQuantity(pcID, pnOperation, pnMin, pnMax)
{
var lnCurrentQuantity = document.getElementById(pcID).value                                  
var lnNewQuantity     = lnCurrentQuantity  
    switch(pnOperation)
    {                   
        case 1: // increase quantity by 1 
        lnNewQuantity++
        if(lnNewQuantity > pnMax)
        {                                
            lnNewQuantity = lnCurrentQuantity
        }
        break;
        case 2:// decrease quantity by 1
        lnNewQuantity--
        if(lnNewQuantity < pnMin)
        {
            lnNewQuantity = lnCurrentQuantity
        }
        break;
        default:// ensuring a typed quantity remains within the parameters defined
        if (lnCurrentQuantity > pnMax || lnCurrentQuantity < pnMin)
        {                                     
            alert("Please set the quantity between " + pnMin + " and " + pnMax + '\n' + "The quantity will now be set to 1")
            lnNewQuantity = 1
        }
        break;
    }
document.getElementById(pcID).value = lnNewQuantity
}
 

Here is an example of the call:

MINUS

onclick="setQuantity('bnquantity', 2, 0, 9999);" alt="Reduce quantity by 1" title="Minus 1"> 
 

PLUS

onclick="setQuantity('bnquantity', 1, 0, 9999);" alt="Increase quantity by 1" title="Plus 1"></td>
 

The onblur was set to call it so that the value could be evaluated

onblur="setQuantity('bnquantity',3, 0, 9999);"
 

This is fairly simplistic and could be tightened up a bit to ensure the value entered is numeric or to make the input readonly so that it cannot typed in. As a final explanation the function paramters are:
pcID: the id of the item to test and write back to
pnOperation: the operation to perform 1 = plus, 2 = minus, 3 = test the value is within the defined range
pnMin: the lowest number allowed
pnMax: the highest number allowed.

If you want to see this operation please visit the order page of my site. Please do not submit the order, unless you want any of the stuff listed. This is simply so you can see it operation.

I hope this helps and if you have questions post back.
nathj

[Tormod]

Awesome. I'll have a look at the above solution and try and amend it to fit my needs. I'll get back to you and let you know how I get on.

Sincere thanks to all who have taken the time to look at this.

[nathj]

Awesome. I'll have a look at the above solution and try and amend it to fit my needs. I'll get back to you and let you know how I get on.

Sincere thanks to all who have taken the time to look at this.

It's a pleasure. Let me know how you get on.

nathj