Multiple JQuery Toggle Buttons with on off events

Hi All,

I have the following JQuery code, whcih works fine for one button - but I cannot work out how to extend it to allow multiple buttons - with each button passing a paramter to the JQUERY so that that is can be added to the called url;

e.g.

<input id="button" name="button1" type="image" />  calls url: "update.php?Code=1",
<input id="button" name="button10" type="image" />  calls url: "update.php?Code=10",
<input id="button" name="button100" type="image" />  calls url: "update.php?Code=100",

etc etc

Any help, as always would be greatly appreciated. Each button

Regards

JamWales

------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Database Record</title>
<script src="js/jquery-1.4.2.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
      
      // data to send to server
      var dataString ;                                      
      
      // to save current state of the button
      var currentState
                                       
      function fetchCurrentState(){
            dataString = "fetch=state" ;
            $.ajax({
                     type: "POST",
                     url: "update.php",
                     data: dataString,
                     success: function(response) {
                           currentState = response ;
                           // check current state and set image accordingly
                           if ( currentState == "off" ){
                                 $("#button").attr("src", "images/off.png");
                                 alert("Current state is " + currentState);
                           }
                           else{
                                 $("#button").attr("src", "images/on.png");
                                 alert("Current state is " + currentState);
                           }
                     }
                     });
      }
      
      fetchCurrentState();
      
      // function to run when image is clicked
      // toggles state and image to on/off
      $("#button").click(function(){
            if ( currentState == "on" ){
                  currentState = "off" ;
                  $("#button").attr("src", "images/off.png");
            }
            else{
                  currentState = "on" ;
                  $("#button").attr("src", "images/on.png");
            }
            dataString = "state=" + currentState ;
            $.ajax({
                     type: "POST",
                     url: "update.php",
                     data: dataString,
                     success: function(response) {
                           alert(response);
                     }
                     });                                                
                                                });      
});
</script>
</head>
<body>
<input id="button" name="button" type="image" />
</body>
</html>
JamieAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
ID attribute MUST BE unique.
You can't have ID="button" for all your buttons.

try this :
$("input[name^='button']").click(function(){
            if ( currentState == "on" ){
                  currentState = "off" ;
                  $(this).attr("src", "images/off.png");
            }
            else{
                  currentState = "on" ;
                  $(this).attr("src", "images/on.png");
            }
            dataString = "state=" + currentState ;
            $.ajax({
                     type: "POST",
                     url: "update.php",
                     data: dataString,
                     success: function(response) {
                           alert(response);
                     }
                     });                                                
                                                });  

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
JamieAuthor Commented:
Hi leakim971 - all sorted, many thanks for your help. JamWales
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
AJAX

From novice to tech pro — start learning today.