[SOLVED] [HELP] With fancy jquery input form

[sloth456]

Hi guys,

 

I'm new to javascript and am exploring jquery as it seems to make things very simple, though I am stuck on this one thing, I hope someone could help me.

 

I have a input form that looks something like this

 

Spare Points: 100

 

Campaign Name  Priority

 

Campaign 1            - 0 +

Campaign 2            - 0 +

Campaign 3            - 0 +

 

I want to use the plus and minus buttons to deduct and add points to each campaign, deducted points get added back to the "spare points", points added to campaigns are taken from the spare points.

 

As I press the plus and minus buttons the numbers need to change accordingly, the total number of points on the screen must only add to 100.

 

I have very little idea where to start, I'm pretty new to jquery.

 

Any ideas?

[rajivgonsalves]

some code to start with hope you enjoy learning jQuery as much as I did

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    
    $('.minus').click(function() {
        var curr = parseInt($(this).parent().find('.cdisp').html());
        if (curr > 0) {
            $(this).parent().find('.cdisp').html(curr-1);
            $('#spare').html(parseInt($('#spare').html())+1);
        }
    });


    $('.plus').click(function() {
        var curr = parseInt($(this).parent().find('.cdisp').html());
        if (parseInt($('#spare').html()) > 0)  {
            $(this).parent().find('.cdisp').html(curr+1);
            $('#spare').html(parseInt($('#spare').html())-1);

        }
    });

});

</script>

Spare Points: <div id="spare">100</div>
<div>
<div>Campaign Name  Priority</div>

<div class="camp">
Campaign 1             <span class="minus">-</span> <span class="cdisp">0</span> <span class="plus">+</span> 
</div>
<div class="camp">
Campaign 2             <span class="minus">-</span> <span class="cdisp">0</span> <span class="plus">+</span> 
</div>
<div class="camp">
Campaign 3             <span class="minus">-</span> <span class="cdisp">0</span> <span class="plus">+</span> 
</div>

[sloth456]

Wow! thats brilliant, thank you very much

 

Works perfectly.  I'm trying to figure out how it works, do you think you could explain it a bit for me? It's up to you, in either case, thank you very much and yes, I'm enjoying learning jquery very much.

 

 

[rajivgonsalves]

its pretty simple actually the function names are suggestive to what they do its will really take a long time to explain it over the forum, you can check jquery docs most of the function are there. other than that it plain logic

 

1) minus - minus 1 from current label and adds 1 to spare (before it does this its checks if current label is > 0

2) plus - adds 1 to current label and subtracts 1 from spare (checks if spare points are available)

 

thats its.  as for the jquery

 

 

        var curr = parseInt($(this).parent().find('.cdisp').html());

 

the above finds the elements with class 'cdisp' in the parent so that would be div with class camp and returns the html

 

hope the explanation was good enough I am not too good at explaining stuff

[sloth456]

Ok, thanks for everything.