Solved

Multiple JQuery Toggle Buttons with on off events

Posted on 2012-04-09
2
1,122 Views
Last Modified: 2013-02-16
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>
0
Comment
Question by:Jamie
2 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 37827430
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
 

Author Closing Comment

by:Jamie
ID: 37841184
Hi leakim971 - all sorted, many thanks for your help. JamWales
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now