Create reusable button css/jquery from list of buttons

Question

long time reader, first time poster. I'm currently doing my first home automation project and have things running well at the moment. What I'm having trouble with is the following. You'll see from the first code below that I have a number of submit button with different values. These values post to an arduino that activate the corresponding channel (via I2C) to turn relays on/off.

<?php include('inc.header.php'); ?>
<link rel="stylesheet" href="lcars.css">

<html>
<head>
  <title>Pool/Alfresco</title> 
    <body style="background-color:powderblue;"> 
      <form action="http://192.168.2.110/control" target="dummyframe" method="POST"> 
        <h1 style="text-align:center;">Pool/Alfresco Controls</h1>
          <div style="float:right;width:40%;"> 
            <img src="img/pool1.gif"><img src="img/pool2.gif"><img src="img/pool3.gif"><img src="img/pool4.gif"><img src="img/pool5.gif"><img src="img/pool6.gif">
          </div>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="11">&nbspSpa Light
          </div>
    <br><br>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="12">&nbspPool Light
          </div>
    <br><br>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="13">&nbspTree Light
          </div>
    <br><br>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="14">&nbspFountains
          </div>
    <br><br>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="On" value="16">&nbspSpa
          </div>
    <br><br>
          <div style="float:left;width:20%;">
            <input class="lcarsbutton" style="color:#f90;height:5%;width:55%;" type="submit" name="AllOff" value="0">&nbspDisable All
          </div>
    </form>
<iframe width="0" height="0" border="0" name="dummyframe" id="dummyframe"></iframe>
   </body>
</html>
<?php include('inc.footer.php'); ?>

This is pretty simple code however I'd like to be able to achieve the same by using the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Pool Controls</title>
    <link rel="stylesheet" href="style2.css">
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
            $(document).ready(function(){
                    $('#button').on('click', function(){
                            $(this).toggleClass('on');
                    });
            });
    </script>
</head>
<body>
      <h1 style="text-align:center;color:red">Pool/Alfresco Controls</h1>
        <section>
            <a href="#" id="button">&#xF011;</a>
            <span></span>
        </section>
</body>
</html>

This code renders a nice looking "Power" button that toggles a light below it between red/green (for off/on states). So basically I need to be able to submit the values in the first code to the arduino to toggle the channels on/off.

I can't post images yet so here's a link to what I mean.

http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg

Any help would be greatly appreciated. Thanks in advance.

You don't need to define a document ready event for each event listener. Move the button 2 event into the first ready handler and delete the other. — Sterling Archer
– Sterling Archer, Commented Sep 10, 2016 at 1:29
Yep, sorry, I meant to delete those few lines. I think they'll be needed when I want to add more buttons though because that's the code that allows the button toggle between on/off. — gnarkill78
– gnarkill78, Commented Sep 10, 2016 at 1:38

Scott · Accepted Answer · 2016-09-10 03:37:13Z

Really loose example. Add iIDs to the inputs so they can be specifically targeted and proper labels... remove all the <br /> tags (that's what padding and margins are for), removed the inline styles. And hobbled together using your posted image. But this should give you the gist.....

$(document).ready(function(){
  
  
    $('.lcarsbutton').on('click', function(){
     var thisValue = $(this).val(); //Gets value of button
      $('h5 span').text(thisValue); //just to show the value
      $(this).toggleClass('on');
     });


});

body { background: #1b1b1b; color: #fff; }

.lcarsbutton {
  color:#f90;
   height:115px;
    width:90px;
  margin: 10px;
  background: url(http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg) no-repeat -130px -115px;
  border: none;
  padding: 3px;
  text-indent: -9999px;
  outline: none;
  }

.lcarsbutton:hover, .lcarsbutton.on {
  background: url(http://media02.hongkiat.com/css3-on-off-button/post-cover.jpg) no-repeat -267px -115px;
  padding: 3px;
  outline: none;
  }



h1, h5 { margin: 0 0 5px 0; padding:0; text-align: center; }
p { margin:0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="http://192.168.2.110/control" target="dummyframe" method="POST"> 
        <h1>Pool/Alfresco Controls</h1>
<h5>Form value is: <span></span></h5>
        
            <label for="btn11"><input class="lcarsbutton" type="submit" name="On" value="11" id="btn11" /> Spa Light</label>
        
            <label for="btn12"><input class="lcarsbutton" type="submit" name="On" value="12" id="btn12" /> Pool Light</label>
        
            <label for="btn13"><input class="lcarsbutton" type="submit" name="On" value="13" id="btn13" /> Tree Light</label>
        </form>

That's awesome Scott and thanks. I just removed the css hover part and now it's exactly how I need it. Thanks again!!!

Collectives™ on Stack Overflow

Create reusable button css/jquery from list of buttons

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related