jQuery Forum

You didn't really ask a question, what is it you need help doing? The code in your fiddle is working as you described it, the only thing missing is the posting of the selections to your php page - I'll assume that that is what you need the help with.

First though, what is a pr element? You have the numbers being clicked within a <pr> element and, as far as I know, there is no such element. Did you mean <pre>?

The first thing to do would be to store the selections in a hidden variable that can be sent to your php page. Then instead of writing the values to the 'counter' div you would store them in the hidden element.

1. <input type="hidden" name="counter" id="counter" />

When the entries get posted what happens? Should the user stay on the same page or will they be sent to another page? The answer to that will determine how you post the answers. If they are stayign on the same page your getting some content back from the php page then you'll want to use ajax (http://api.jquery.com/category/ajax/ ) to post the data to the server, probably the post method, http://api.jquery.com/jQuery.post/ .

If they are going to a new page after the data is posted and processed then you can use a normal form and submit it. Make sure the hidden element is within the form and that the action of the form is your php pge and you should be all set.

Hope that was what you needed.

Dave

Thanks it worked! Now, I have circles with colors, and with animate the colors are not changing. Any help with that ? Here is the code --

SCRIPTS --

1.     $(document).ready(function() {
       $('canvas').click(function() {
           $(this).animate({
               'context.fillStyle':'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')'
           }, 500);
       });
       $("#flash").click(function() {
           $('#counter').val(function(i, val) {
               return val == '0'?1 : val + 1;
           });
       });
       $("#fl").click(function() {
           $('#counter').val(function(i, val) {
               return val == '0'?2 : val + 2;
           });
       });
   });
   
2. $(document).ready(function() {
       var canvas = document.getElementById("circle");
       var context = canvas.getContext('2d');
      
       context.beginPath();
       context.fillStyle="rgb(230,34,54)";
       context.arc(15,15,8,0,Math.PI*2,true); context.closePath();
       context.fill();
   
       var canvas = document.getElementById("circle2");
       var context = canvas.getContext('2d');
      
       context.beginPath();
       context.fillStyle="rgb(255,00,00)";
       context.arc(15,15,8,0,Math.PI*2,true); context.closePath();
       context.fill();
   });

BODY --

1. <div id="flash" style="float:left; margin: 20px 0 0 0;"><canvas id="circle" width="30" height="30">Not found!</canvas></div>
2. <div id="fl" style="float:left; margin: 20px 0 0 40px;"><canvas id="circle2" width="30" height="30">Not found!</canvas></div>

But, still the circles are not changing colors. The same is working with TEXT but not here. Any help with this?