asked on

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>

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Jamie

ASKER

Hi leakim971 - all sorted, many thanks for your help. JamWales