Jump to content

Change text color of button after it is pressed


sparkynerd

Recommended Posts

I have created a PHP web page that allows me to control a serial device (a speaker selector matrix), and an Arduino (to switch an amplifier off and on) over my network. I am trying to make it so the text color changes on what ever button is pressed. The button presses are stored as a variable and then POSTed. I would like the text on the current button selected to turn red. There are 5 separate sets of buttons, so each set could have a button with red text at any time. Eventually, I would like to have a graphic next to the button which would change based on a button press. (baby steps!)

 

Attached is the web page. Please keep any answers in laymans terms, since I am a real PHP noob! This webpage is the result of A LOT of trial and error, but it works! Any suggestions are welcome!

audio.php

Link to comment
Share on other sites

First, you should complement id property for buttons. For example:

<button name="LED2" id="btnLED2ON" style="height: 1.8em; width: 10em; font-size: 16px;" value="ON" type="submit">Power On</button>

<button name="LED2" id="btnLED2OFF" style="height: 1.8em; width: 10em; font-size: 16px;" value="OFF" type="submit">Power Off</button>

Note that id must be unique to HTML elements.

 

Next, you complement onLoad event for body tag as the following:

<body onload="audio_onload();">

You add script tags to implement audio_onload() function using javascript or Jquery as the following:

<script type="text/javascript" language="javascript">
function audio_onload()
{
   <?php 
        if ($LED2 == "ON")
        {
        ?>
            // Turn text color of Power On button into red
            document.getElementById("btnLED2ON").style.color = "red";
        <?php
        }
   ?>
}
</script>

Link to comment
Share on other sites

  • 5 weeks later...

dung's idea recommends javascript.  if youre not comfortable with that, you could stick with php.  capture the value of the POSTed variable and use an if statement.

<button name="LED2" style="height: 1.8em; width: 10em; font-size: 16px;<?php if( $_POST['LED2'] == "ON" ){ echo" color:red;"} ?>" value="ON" type="submit"></button>
Link to comment
Share on other sites

<html>
<head>
<title> New Document </title>
<script type="text/javascript" language="javascript">
function changeBtn(btn)
{
if (! btn.style)
{
alert("Sorry, your browser doesn't support this operation.");
return;
}
btn.style.background = "red";
btn.style.color = "blue";
return;
}
</script>
This works fine for me.

 

</head>

<body>
<form id="f1" name="f1" action="" method="">
<br>
<input type="button" value="Try me" onClick="changeBtn(this)">
</form>
</body>
</html>

Link to comment
Share on other sites

  • 4 weeks later...
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.