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?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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
 
JamieAuthor Commented:
Hi leakim971 - all sorted, many thanks for your help. JamWales
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.